Нужно чтобы было 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">