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

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

Новый топик
Страницы: 1  |  2
01.10.2013, 15:46
Ответить | Цитировать
Гость
Гость

Да, Вы несомненно правы, роботом лучше не быть) Последний вопрос. Таких блоков много и потому, картинка меняется во всех. Что нужно дописать, чтобы картинка менялась только лишь в 1-ом блоке?)
01.10.2013, 16:14
Ответить | Цитировать
Руслан Густокашин
Студия Вэлпис
Руслан Густокашин

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

Нужно тогда фото-биг и фото-смол обернуть в один общий див, например <div class='item'>...</div>
и скрипт переделать таким образом:
Код:

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

Т.е. при клике на картинку, ищется ближайший родительский итем и уже внутри него ищется фото-биг улыбка

01.10.2013, 16:39
Ответить | Цитировать
Гость
Гость

Благодарю) Теперь я знаю, как оборачивать скрипт) Никогда не поздно учиться)
01.10.2013, 16:50
Ответить | Цитировать
Гость
Гость

Не примите за наглость, но как добавить активный класс?)
01.10.2013, 17:05
Ответить | Цитировать
Гость
Гость

Код:

$('.photo-small img').click(function(){
$(this).closest('.object').find('.photo-big img').attr('src', $(this).attr('src'))
$('.photo-small img').removeClass('active')
$(this).addClass('active')
})

Если дописать таким способом, то почему-то у других объектов класс удаляется) Опять же нужна некая обертка...)
01.10.2013, 18:06
Ответить | Цитировать
Nexwich
Панасин Александр
Nexwich

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

$('.photo-small img') это значит что все элементы которые подходят этому условию
$(this) элемент который был выполнен

Вариант 1:
Ваша структура должна быть подобна этой
<div class='item'>
<div class='photo-big'><img...></div>
<div class='photo-small'>
<img...>
<img...>
<img...>
</div>
</div>

<div class='item'>
<div class='photo-big'><img...></div>
<div class='photo-small'>
<img...>
<img...>
<img...>
</div>
</div>

$('.photo-small img').bind('click',function(){
$(this).parents('.item').find('.photo-small img').attr('src', $(this).attr('название-атрибута-большого-изображения'))
$(this).addClass('active').siblings().removeClass('active')
})


$(this).addClass('active').siblings().removeClass('active')
это читается как "Этот элемент.добавитьКласс('active').соседниеЭлементы.удалитьКласс('active')"

Вариант 2:
либо если остается структура прежней например в целях верстки то

<div class='photo-big'><img...></div>
<div class='photo-small'>
<img...>
<img...>
<img...>
</div>


$('.photo-small img').bind('click',function(){
$(this).parents('.photo-small').prev().find('img').attr('src', $(this).attr('название-атрибута-большого-изображения'))
$(this).addClass('active').siblings().removeClass('active')
})


Модуль "Почтовые уведомления" – настройка уведомлений на вашем сайте без программирования. Цена отзыв. Мне очень важно ваше мнение.
01.10.2013, 19:00
Ответить | Цитировать
Гость
Гость

Супер, спасибо! Вы мне очень сильно помогли)
198 196 2013-10-01 19:00:07 13325
Страницы: 1  |  2
Описание проекта