JSFiddle - React, Tailwind, and code Playground

HTML

<div class="preloader">0.0%</div>
<div id="big-image">
    <img src="http://lorempixel.com/400/200/animals/1/">
    <img src="http://lorempixel.com/400/200/fashion/1/">
    <img src="http://lorempixel.com/400/200/city/1/">
</div>

<div class="small-images">
    <img src="http://lorempixel.com/100/50/animals/1/">
    <img src="http://lorempixel.com/100/50/fashion/1/">
    <img src="http://lorempixel.com/100/50/city/1/">
</div>

CSS

.small-images a, .big-images a {display:inline-block}
.small-images a.selected {border:1px solid red}
img{display:none}

JavaScript

$.fn.preload = function (fn) {
    var len = this.length, i = 0;
    return this.each(function () {
        var tmp = new Image, self = this;
        if (fn) tmp.onload = function () {
            fn.call(self, 100 * ++i / len, i === len);
        };
        tmp.src = this.src;
    });
};
$('img').preload(function(perc, done) {
    $('.preloader').text(Math.round(perc)+'%');
    if(done==true){
         $('img').show();   
    }
    console.log(this, perc, done);
    $(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var index = $(this).index();
        $("#big-image img").eq(index).show().siblings().hide();
    });
});
});