JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="imgThumb">
    <img src="http://lorempixel.com/250/250/sports">
    <img src="http://lorempixel.com/250/250/cats">
    <img src="http://lorempixel.com/250/250/nature">
    <img src="http://lorempixel.com/250/250/people">
</div>

<div class="imgMain">
    <img src="http://lorempixel.com/250/250/sports">
</div>

CSS

.imgThumb img { width: 50px; height: 50px; cursor: pointer; }
.imgMain img { width: 250px; height: 250px; }

JavaScript

$('.imgThumb img').click(function() {
    var src = this.src;
    $('.imgMain img').fadeOut(400,function(){
        $(this).attr('src', src).fadeIn(400);
    });
});