Переключение между картинками c помощью jquery

281

06 января 2018, 04:29

Как добиться переключения между 4 картинками, так чтобы при клике на одну из них менялась главная картинка?

P.S. у меня там несколько таких галерей, и при клике на одну картинку меняются сразу все. Попробовал с помощью this или next, не получилось. Что можно придумать, чтобы предотврaтить это?

$('.img_list img').on('click', function(e){ 
    $('.main_img img').attr('src', $(this).attr('src')); 
});

.img_list{ 
  display:flex; 
} 
.main_img img{ 
    width:60%; 
 
} 
.img_list img{ 
  width:20%; 
  align-self:flex-start; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="main_img"> 
  <img src="https://static.wixstatic.com/media/956ba2_af20317893ce438187fccc708d37db44~mv2_d_2268_2268_s_2.jpg_256"> 
</div> 
 
<div class="img_list"> 
  <img src="https://static.wixstatic.com/media/956ba2_af20317893ce438187fccc708d37db44~mv2_d_2268_2268_s_2.jpg_256"> 
  <img src="https://pbs.twimg.com/profile_images/670332049522298880/N5uJZueS_400x400.jpg"> 
  <img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg"> 
  <img src="http://myhswm.org/images/sized/images/animals/LRM_EXPORT_20171221_154654-256x256.jpg"> 
</div> 
<div class="main_img" style="margin-top:3rem"> 
  <img src="https://static.wixstatic.com/media/956ba2_af20317893ce438187fccc708d37db44~mv2_d_2268_2268_s_2.jpg_256"> 
</div> 
 
<div class="img_list"> 
  <img src="https://static.wixstatic.com/media/956ba2_af20317893ce438187fccc708d37db44~mv2_d_2268_2268_s_2.jpg_256"> 
  <img src="https://pbs.twimg.com/profile_images/670332049522298880/N5uJZueS_400x400.jpg"> 
  <img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg"> 
  <img src="http://myhswm.org/images/sized/images/animals/LRM_EXPORT_20171221_154654-256x256.jpg"> 
</div>

Answer 1

$(".img_list img").click(function() { 
  $(this).closest(".img_list").prev(".main_img").find("img"). 
    attr("src", $(this).attr("src")); 
});

.img_list { 
  display: flex; 
} 
 
.main_img img { 
  width: 60%; 
} 
 
.img_list img { 
  width: 20%; 
  align-self: flex-start; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="main_img"> 
  <img src="https://static.wixstatic.com/media/956ba2_af20317893ce438187fccc708d37db44~mv2_d_2268_2268_s_2.jpg_256"> 
</div> 
 
<div class="img_list"> 
  <img src="https://static.wixstatic.com/media/956ba2_af20317893ce438187fccc708d37db44~mv2_d_2268_2268_s_2.jpg_256"> 
  <img src="https://pbs.twimg.com/profile_images/670332049522298880/N5uJZueS_400x400.jpg"> 
  <img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg"> 
  <img src="http://myhswm.org/images/sized/images/animals/LRM_EXPORT_20171221_154654-256x256.jpg"> 
</div> 
 
<div class="main_img"> 
  <img src="https://static.wixstatic.com/media/956ba2_af20317893ce438187fccc708d37db44~mv2_d_2268_2268_s_2.jpg_256"> 
</div> 
 
<div class="img_list"> 
  <img src="https://static.wixstatic.com/media/956ba2_af20317893ce438187fccc708d37db44~mv2_d_2268_2268_s_2.jpg_256"> 
  <img src="https://pbs.twimg.com/profile_images/670332049522298880/N5uJZueS_400x400.jpg"> 
  <img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg"> 
  <img src="http://myhswm.org/images/sized/images/animals/LRM_EXPORT_20171221_154654-256x256.jpg"> 
</div>

Answer 2

$('.img_list img').on('click', function(e){
    $('.main_img img').attr('src', $(this).attr('src'));
});

Answer 3

$('.img_list img').on('click', function(e){ 
    $(this).parents('.gallery').find('.main_img img').attr('src', $(this).attr('src')); 
});

.img_list{ 
  display:flex; 
} 
.main_img img{ 
    width:60%; 
 
} 
.img_list img{ 
  width:20%; 
  align-self:flex-start; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="gallery"> 
 <div class="main_img"> 
   <img src="https://static.wixstatic.com/media/956ba2_af20317893ce438187fccc708d37db44~mv2_d_2268_2268_s_2.jpg_256"> 
 </div> 
 <div class="img_list"> 
   <img src="https://static.wixstatic.com/media/956ba2_af20317893ce438187fccc708d37db44~mv2_d_2268_2268_s_2.jpg_256"> 
   <img src="https://pbs.twimg.com/profile_images/670332049522298880/N5uJZueS_400x400.jpg"> 
   <img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg"> 
   <img src="http://myhswm.org/images/sized/images/animals/LRM_EXPORT_20171221_154654-256x256.jpg"> 
 </div> 
</div> 
<div class="gallery"> 
 <div class="main_img" style="margin-top:3rem"> 
   <img src="https://static.wixstatic.com/media/956ba2_af20317893ce438187fccc708d37db44~mv2_d_2268_2268_s_2.jpg_256"> 
 </div> 
 <div class="img_list"> 
   <img src="https://static.wixstatic.com/media/956ba2_af20317893ce438187fccc708d37db44~mv2_d_2268_2268_s_2.jpg_256"> 
   <img src="https://pbs.twimg.com/profile_images/670332049522298880/N5uJZueS_400x400.jpg"> 
   <img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg"> 
   <img src="http://myhswm.org/images/sized/images/animals/LRM_EXPORT_20171221_154654-256x256.jpg"> 
 </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Изменить текст JGrowl уведомления (CMS ModX Revo)

Здравствуйте, подскажите где изменить текст JGrowl уведомления? CMS ModX RevoВ словарях копал, не нашел именно это уведомление

227

javascript

React - state. Изменение объекта

Не могу изменить переменную в stateЕсть state =

225

PHP

Удаление записей из бд MYSQL

Ребят, подскажите пожалуйста в чем ошибка в коде, не могу понять, нужно удалить запись по id, получаю глобальный массив GET по id, в запросе указываю...

250

PHP

Ошибка в логах PHP #2

PHP Notice: Array to string conversion in

252