0

Нужно чтобы было 2 больших изображения. Но после клика на одну из миниатюр, второе увеличенное изображение пропадает

$(document).ready(function() {
  $('.slide__thumbnails .thumb').click(function() {

    var imgThumb = $(this).attr('src');
    var oldImg = $('.full_img');
    var imgFull = $('<img class="full_img" src="' + imgThumb + '">');
    imgFull.hide();
    $('.full').prepend(imgFull);
    imgFull.show(1);
    oldImg.hide(1, function() {
      $(this).remove();
    });
  });
});
$('thumb:first').click();
.thumb {
  height: 100px;
  width: auto;
}

.full_img {
  height: auto;
  max-width: 456px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full">
</div>
<img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="full_img">
</div>
<!-- <a class="thumb_trigger" href="#"> -->
<div class="slide__thumbnails">
  <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="thumb">
  <!-- </a> -->
  <!-- <a class="thumb_trigger" href="#"> -->
  <img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/lifestyle/2017/11/09/how-to-keep-cat-from-scratching-your-sofa-to-shreds/_jcr_content/par/featured_image/media-0.img.jpg/931/524/1510172827500.jpg?ve=1&tl=1&text=big-top-image" alt=""
    class="thumb">

  <div class="full">
  </div>
  <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="full_img">
</div>
<!-- <a class="thumb_trigger" href="#"> -->
<div class="slide__thumbnails">
  <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="thumb">
  <!-- </a> -->
  <!-- <a class="thumb_trigger" href="#"> -->
  <img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/lifestyle/2017/11/09/how-to-keep-cat-from-scratching-your-sofa-to-shreds/_jcr_content/par/featured_image/media-0.img.jpg/931/524/1510172827500.jpg?ve=1&tl=1&text=big-top-image" alt=""
    class="thumb">

1 ответ 1

0
var oldImg = $('.full_img');

выбирает все элементы с классом full_img. И, соответственно,

oldImg.hide(1, function() {
  $(this).remove();
});

все их удаляет.

Нужно

var oldImg = $(this).closest('.slide__thumbnails').find('.full_img');

И вместо удаления и пересоздания элементов можно просто менять атрибут src.

A здесь

$('thumb:first').click();

пропущена точка в начале селектора.

$(document).ready(function() {
  $('.slide__thumbnails .thumb').click(function() {

  $('.slide__thumbnails .thumb').click(function(){
var imgThumb = $(this).attr('src');
var oldImg = $(this).closest('.slide__thumbnails').find('.full_img');
oldImg.attr('src', imgThumb);
  });
  });
});
$('.thumb:first').click();
.thumb {
  height: 100px;
  width: auto;
}

.full_img {
  height: auto;
  max-width: 456px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <a class="thumb_trigger" href="#"> -->
<div class="slide__thumbnails">
<img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="full_img">
 
  <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="thumb">
  <!-- </a> -->
  <!-- <a class="thumb_trigger" href="#"> -->
  <img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/lifestyle/2017/11/09/how-to-keep-cat-from-scratching-your-sofa-to-shreds/_jcr_content/par/featured_image/media-0.img.jpg/931/524/1510172827500.jpg?ve=1&tl=1&text=big-top-image" alt=""
    class="thumb">

</div>
<!-- <a class="thumb_trigger" href="#"> -->
<div class="slide__thumbnails">
  <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="full_img">
  <img src="https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg" alt="" class="thumb">
  <!-- </a> -->
  <!-- <a class="thumb_trigger" href="#"> -->
  <img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/lifestyle/2017/11/09/how-to-keep-cat-from-scratching-your-sofa-to-shreds/_jcr_content/par/featured_image/media-0.img.jpg/931/524/1510172827500.jpg?ve=1&tl=1&text=big-top-image" alt=""
    class="thumb">
</div>

1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.