title: Thumbnail image should be swapped with the current image on click
body: <p>I have a codepen link <a href="https://codepen.io/robgolbeck/pen/bVGmop" rel="nofollow noreferrer">https://codepen.io/robgolbeck/pen/bVGmop</a> 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.</p>
  
  <p>JS</p>
  
  <pre><code>$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $(this).attr('src',$('#largeImage').attr('src').replace('large','thumb'));
  });
  </code></pre>