JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

Click on thumbnail:
<div id="thumbs">
<a class="thumb" href="http://photos.smugmug.com/photos/344291068_HdnTo-M.jpg"><img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg"></a> 
<a class="thumb" href="http://photos.smugmug.com/photos/344292111_SvSfK-M.jpg"><img src="http://photos.smugmug.com/photos/344292111_SvSfK-Ti.jpg"></a> 
<a class="thumb" href="http://photos.smugmug.com/photos/344290550_mae5t-M.jpg"><img src="http://photos.smugmug.com/photos/344290550_mae5t-Ti.jpg"></a> 
<a class="thumb" href="http://photos.smugmug.com/photos/344287800_YL8Ha-M.jpg"><img src="http://photos.smugmug.com/photos/344287800_YL8Ha-Ti.jpg"></a> 
<a class="thumb" href="http://photos.smugmug.com/photos/344287088_xeP8B-M.jpg"><img src="http://photos.smugmug.com/photos/344287088_xeP8B-Ti.jpg"></a> 
<a class="thumb" href="http://photos.smugmug.com/photos/344286315_oyxRy-M.jpg"><img src="http://photos.smugmug.com/photos/344286315_oyxRy-Ti.jpg"></a> 
</div>






<div id="fadeContainer">
<img id="fade1" src="http://photos.smugmug.com/photos/344290550_mae5t-M.jpg">
</div>

CSS

#fadeContainer {
    position: relative;
    height: 400px;
    width: 600px;
}
#fadeContainer img {
    position: absolute;
}

a, a:visited { color: blue;}

#thumbs {width: 620px;}
#thumbs img {border: none;}

JavaScript

// precache all images so they will load on demand
var imgs = [];
$('a.thumb').each(function() {
    var img = new Image();
    img.src = this.href;
    imgs.push(img);
}).click(function () {
    var oldImg = $("#fadeContainer img");
    
    var img = new Image();
    img.src = this.href;
    var newImg = $(img).hide();
    $("#fadeContainer").append(img);
    
    oldImg.stop(true).fadeOut(500, function() {
        $(this).remove();
    });
    newImg.fadeIn(500);
    return false;
});