Профиль и настройки
Заказы Лицензии Техническая поддержка Выйти
Регистрация
Регистрируясь, вы подтверждаете свое согласие с соглашением об использовании персональных данных.
Восстановление пароля
Вход
← на Главную /  Разработчикам /  Форум /  Общие вопросы

Смена атрибута src у большой картинки при клике на маленькую картинку

Страницы: 1  |  2
27.09.2013, 17:57
Гость
Гость

 		Здравствуйте и доброго времени суток, дамы и господа!)
Задача не проста, но думаю выполнима)
Допустим, есть некий код:
Код:


<div id="photo-big">

<img src="1-big.jpg">

</div>

<div id="photo-small">

<img class='active' src="1-small.jpg">

<img src="2-small.jpg">

<img src="3-small.jpg">

<img src="4-small.jpg">

</div>

И даже скрипт, но он подставляет лишь атрибут "src" маленькой картинки.
Код:


$(".object").each(function (i, el) {

var imgBig = $('#photo-big img', $(el)),

     imgSmall = $('#photo-small img', $(el));

     imgSmall.click(function(event) {

         event.preventDefault();

         if (imgBig.attr('src') != $(this).attr('src')) {

             imgBig.hide().attr('src',$(this).attr('src'));

             imgBig.load(function() {

                  $(this).fadeIn(1000);

             })

         }

     })

})

Нужно, чтобы при клике на маленькую картинку с названием "-small", подставлялся атрибут "src" в большую картинку c уже измененным названием "-big". Ну и при переходе с одной маленькой картинки на другую, сохранение класса на активном изображении.
Возможно ли сие действие?)
Спасибо!)
29.09.2013, 12:24
Гость
Гость

 		наверное возможно.
Обратитесь к верстальщику
30.09.2013, 13:45
Гость
Гость

 		Тут нужно знание js.. Может есть такие?)
30.09.2013, 18:32
Nexwich
Панасин Александр
Nexwich

Зарегистрирован:
2011-04-05
Сообщений: 1037

 		Код jQuery
$('.photo-small').delegate('img','click',function(){
$('.photo-big img').attr('src', $(this).split('-')[0]+'-big.jpg')
})

Модуль "Почтовые уведомления" – настройка email уведомлений на вашем сайте без программирования. Бесплатно. http://netcat.ru/products/CatStore/solution_242.html
30.09.2013, 22:41
Руслан Густокашин
Студия Вэлпис

Зарегистрирован:
2012-02-06
Сообщений: 962

 		Да Вы хакер однако! Красивое решение. улыбка
От себя добавлю, что работать оно будет только на новых jQuery. В старых функции delegate нет.
01.10.2013, 07:48
Гость
Гость

 		Спасибочки!) Буду пробовать!)
01.10.2013, 09:19
Гость
Гость

 		Такс...
Походу дела я малость не верно описал то, что нужно)
Код выглядит вот так:
Код:


<div class='photo-big'>

<?=($f_img1?"<img class='lazy' data-original='$f_img1s3'>":"")?>

</div>

<div class='photo-small'>

<?=($f_img1?"<img class='lazy active' data-original='$f_img1s5'>":"")?>

<?=($f_img2?"<img class='lazy' data-original='$f_img2s5'>":"")?>

<?=($f_img3?"<img class='lazy' data-original='$f_img3s5'>":"")?>

<?=($f_img4?"<img class='lazy last' data-original='$f_img4s5'>":"")?>

</div>

Нужно, чтобы при нажатии например на "$f_img2s5" в блоке "photo-small", менялся src у картинки в блоке "photo-big" на "$f_img2s3". Далее, при нажатии на "$f_img3s5", менялось на "$f_img3s3", при нажатии на "$f_img4s5" на "$f_img4s3".
Вроде ясно выразился) Можно ли так сделать?)
Спасибо!)
01.10.2013, 13:09
Руслан Густокашин
Студия Вэлпис

Зарегистрирован:
2012-02-06
Сообщений: 962

 		Не, совершенно непонятно. В приведенном Вами коде нет упомянутых переменных: $f_img2s3, $f_img3s3 и $f_img4s3.
Можете по-русски объяснить, что в итоге-то нужно? улыбка При клике на мелкую фотку чтобы загружалась большая фотка в соответствующее место(photo_big)?
Если да, то не проще ли для этого подключить уже готовый плагин bxslider или flexslider например? Вот такая штука у меня получилась, например. Еще и эффекты можно менять, неплохо ведь. улыбка
01.10.2013, 13:11
Nexwich
Панасин Александр
Nexwich

Зарегистрирован:
2011-04-05
Сообщений: 1037

 		Руслан я зачту это как за комплимент улыбка
delegate вполне отлично работает на версии 1.7

Что касается новой задачи.
В картинках должен присутствовать атрибут src иначе нарушается валидность

$('.photo-small img').bind('click',function(){
$('.photo-big img').attr('src', $(this).attr('data-original'))
})

<div class='photo-big'>
<?=($f_img1?"<img class='lazy' src='$f_img1s3' data-original='$f_img1s3'>":"")?>
</div>
<div class='photo-small'>
<?=($f_img1?"<img class='lazy active' src='$f_img1s5' data-original='$f_img1s3'>":"")?>
<?=($f_img2?"<img class='lazy' src='$f_img2s5' data-original='$f_img2s3'>":"")?>
<?=($f_img3?"<img class='lazy' src='$f_img3s5' data-original='$f_img3s3'>":"")?>
<?=($f_img4?"<img class='lazy last' src='$f_img4s5' data-original='$f_img4s3'>":"")?>
</div>

Модуль "Почтовые уведомления" – настройка email уведомлений на вашем сайте без программирования. Бесплатно. http://netcat.ru/products/CatStore/solution_242.html
01.10.2013, 13:42
Гость
Гость

 		Руслан, отличное решение!) Но ведь там используется список с уже загруженными изображениями) В Вашем примере всего 1 объект с изображениями, а у меня их около 100, так как, это объект с товаром, а их не мало на странице) Как я думаю, лучше загружать их по мере необходимости, дабы ускорить загрузку всей страницы) Какое Ваше мнение об этом?)

Александр, изображения меняются, но не так, как нужно) В src большой фотки загружается маленькая.

По поводу моей задачи: попробую еще раз, но объяснить понятно)))

$f_img1s3 - 1-ая большая фотка
$f_img2s3 - 2-ая большая фотка
$f_img3s3 - 3-я большая фотка
$f_img4s3 - 4-ая большая фотка

$f_img1s5 - 1-ая маленькая фотка
$f_img2s5 - 2-ая маленькая фотка
$f_img3s5 - 3-я маленькая фотка
$f_img4s5 - 4-ая маленькая фотка

Код:


<div class='photo-big'>

<img src='$f_img1s3'> большие изображения - ($f_img1s3, $f_img2s3, $f_img3s3 и $f_img4s3) должны подгружаться (заменяться) только тогда, когда мы жмем на любую из маленьких картинок (f_img1s5, f_img2s5, f_img3s5 или f_img4s5).



То есть, при нажатии на f_img1s5 в блоке с маленькими картинками появляется $f_img1s3 в блоке с большими картинками, но для больших картинок используем один img, дабы сократить загрузку всех картинок.



</div>

<div class='photo-small'>

<img src='$f_img1s5'>

<img src='$f_img2s5'>

<img src='$f_img3s5'>

<img src='$f_img4s5'>

</div>


Конечно много писанины, но надеюсь, что теперь понятно)
01.10.2013, 14:31
Nexwich
Панасин Александр
Nexwich

Зарегистрирован:
2011-04-05
Сообщений: 1037

 		НЕ понимаю таких как вы.
Почему так сложно обозвать переменные читабельно? Например
img_small_1 img_small_2 img_small_3 img_small_4
img_big_1 img_big_2 img_big_3
img_xl_1 img_xl_2 img_xl_3
img_s_1 img_s_2 img_s_3
ПАЛЕЦ ВВЕРХ ЗА ЧЕЛОВЕЧЕСКИЕ ИМЕНА и разделители в нихкруто
У меня наборы полей параметров товара а их около 100 влезают в 7 строк
В них всего 262 знака с html кодом, а у вас? И когда я добовляю еще один параметр то в альтернативной форме добавления или редактирования я не чего не изменяю. Код работает как часы для фронтальной и административной частей сайта.

Если мой код верный то переставьте в js значения на нужные вам а не расписывайте все заново
Я возможно немного запутался в вашем машинном коде я же не робот как вы. Для меня куда яснее слово big чем 3 или 5 не понятно что из них превью, а что основное изображение.
в data-original у вас большое изображение его мой код и грузит так что судя по тому что вы пишите у меня нет ошибки она где-то у вас. Может вы вставили не то не туда или заданные размеры css html

Если у вас более 100 изображений в одной статье то не лучшем ли решением будет сделать отдельный компонент. Дело в загрузке таблиц. У вас получаются слишком большие.

Перепишите сами
$('.photo-small img').bind('click',function(){
$('.photo-big img').attr('src', $(this).attr('название-атрибута-большого-изображения'))
})

Модуль "Почтовые уведомления" – настройка email уведомлений на вашем сайте без программирования. Бесплатно. http://netcat.ru/products/CatStore/solution_242.html
198 196 2013-10-01 19:00:07 13325
Страницы: 1  |  2
Описание проекта
Сохранить и свернуть