JSFiddle - React, Tailwind, and code Playground

by lalatino

HTML

<div class="menu">
    <img class="box" src="http://imageshack.us/a/img197/5519/arrowup.jpg" />
    <img class="box" src="http://imageshack.us/a/img248/3055/arrowrighto.jpg" />
    <img class="box" src="http://imageshack.us/a/img37/9123/arrowleft.jpg" />
    <img class="box" src="http://imageshack.us/a/img16/338/arrowdownvm.jpg" />
</div>

<img id="myMainPicture" />

CSS

.box {
    width:40px; height:30px;
    cursor:pointer;
    margin-right:5px;
}

#myMainPicture {
    border:1px solid blue;
    width:200px;
    height:150px;
    opacity:1;
}

JavaScript

$(document).ready(function () {
    var images = $('img.box'),
        total = images.length,
        main = $('#myMainPicture');
    main.prop("src", $(images[0]).attr('src'));
    images.click(function () {
        var src = $(this).attr('src');
        main.stop().animate({
            opacity: 0
        }, 1000, 'linear', function () {
            main.prop("src", src);
            main.animate({ opacity: 1 });
        });
    });
});