JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<a href="http://placehold.it/50" class="thumbnail"><img src="http://placehold.it/50" 
  alt="Image 1" width="20" height="20"/></a>

<a href="http://placehold.it/50" class="thumbnail"><img src="http://placehold.it/50" 
  alt="Thumbnail 2" width="20" height="20"/></a>

<div id="imageWrap">
    <img src="http://placehold.it/50" alt="Main Image" id="mainImage" />
</div>

CSS

#imageWrap {
    width: 640px;
    height: 420px;
}

JavaScript

$('.thumbnail').live("click", function () {
   // $('#mainImage').hide();
    var i = $('<img />').attr('src', this.href).load(function () {
        $('#mainImage').fadeOut(100, function () { // fade out your main image first
            $('#mainImage').attr('src', i.attr('src'));
            $('#imageWrap').css('background-image', 'none');
            $('#mainImage').fadeIn(1000); // fade in after your previous image is fadaOut
        });
    });
    return false;
});