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

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

Страницы: 1  |  2
01.10.2013, 15:46
Гость
Гость

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

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

 		Нужно тогда фото-биг и фото-смол обернуть в один общий див, например <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
Сообщений: 1037

 		$('.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')
})

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

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