JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="col-xs-6 thumbnails">
    <div class=" col-xs-12"> <a href="#" class="thumbnail">
            <img class="first" src="http://dummyimage.com/400x400/000/fff&text=FIRST" alt="" />
        </a>

    </div>
    <div class=" col-xs-6"> <a href="#" class="thumbnail">
            <img class="second" src="http://dummyimage.com/400x400/333/000&text=SECOND" alt=""/>
        </a>

    </div>
    <div class="third col-xs-6"> <a href="#" class="thumbnail">
            <img class="third" src="http://dummyimage.com/400x400/ffc/333&text=THIRD" alt=""/>
        </a>
    </div>
</div>

JavaScript

$(function(){
    $('img').off().on('click', function() {
        /* We define the sources */
        var src1 = $('img.first').attr('src');
        var src2 = $('img.second').attr('src');
        var src3 = $('img.third').attr('src');
    
        if ($(this).hasClass('second')) {
            $('img.first').attr('src', src2).hide().fadeIn(100);
            $(this).attr('src', src3).hide().fadeIn(100);
            $('img.third').attr('src', src1).hide().fadeIn(100);
            return false;
        } else if ($(this).hasClass('third')) {
            $('img.first').show().attr('src', src3).hide().fadeIn(100);
            $('img.second').attr('src', src1).hide().fadeIn(100);
            $(this).attr('src', src2).hide().fadeIn(100);
            return false;
        }
        
    });
});