Регистрация
Вход через соцсети
Восстановление пароля

Смена атрибута 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
Сообщений: 943

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

Модуль "Почтовые уведомления" – настройка уведомлений на вашем сайте без программирования. Цена отзыв. Мне очень важно ваше мнение.
30.09.2013, 22:41
Ответить | Цитировать
Руслан Густокашин
Студия Вэлпис
Руслан Густокашин

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

Да Вы хакер однако! Красивое решение. улыбка
От себя добавлю, что работать оно будет только на новых 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
Сообщений: 869

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

01.10.2013, 13:11
Ответить | Цитировать
Nexwich
Панасин Александр
Nexwich

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

Руслан я зачту это как за комплимент улыбка
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>


Модуль "Почтовые уведомления" – настройка уведомлений на вашем сайте без программирования. Цена отзыв. Мне очень важно ваше мнение.
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
Сообщений: 943

НЕ понимаю таких как вы.
Почему так сложно обозвать переменные читабельно? Например
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('название-атрибута-большого-изображения'))
})


Модуль "Почтовые уведомления" – настройка уведомлений на вашем сайте без программирования. Цена отзыв. Мне очень важно ваше мнение.
198 196 2013-10-01 19:00:07 13325
Страницы: 1  |  2
Описание проекта