monisha monisha - 27 days ago 10
jQuery Question

Thumbnail image should be swapped with the current image on click

I have a codepen link https://codepen.io/robgolbeck/pen/bVGmop which is quite similar to what I want. The only thing I want is that on click of thumbs image the large image should be replaced with the clicked thumbs image and it should not be present in the thumbs list.In total only 5 images should be present in rotation whereas here there are 6(5+ 1repeated in thumbs). I have tried to tweak the JS but it doesn't work as expected. Can anyone please help. Stuck with this problem since morning. Thanks in advance.

JS

$('#thumbs img').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$(this).attr('src',$('#largeImage').attr('src').replace('large','thumb'));
});

Dij Dij
Answer Source

in the click handler event of #thumbs img, you can first show all the images and then hide current image. to start you can trigger click on first image.

$('#thumbs img').click(function(){
  $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
  $('#description').html($(this).attr('alt'));
  $('#thumbs img').show();
  $(this).hide();
});
$('#thumbs img').first().trigger('click');