JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="gallery">
    <img src="http://papermashup.com/wp-content/uploads/2009/07/gallery.png" class="thumb" alt="http://www.st-hughs.ox.ac.uk/__data/assets/image/0014/5153/Gym---Main-Room.jpg">
    <img src="http://2.bp.blogspot.com/-V3ImhEBNtS4/UJRC08KGp6I/AAAAAAAAAJc/8rMMG6VIbvQ/s320/Candy.jpg" class="thumb" alt="http://2.bp.blogspot.com/-V3ImhEBNtS4/UJRC08KGp6I/AAAAAAAAAJc/8rMMG6VIbvQ/s320/Candy.jpg">
    <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/201/cache/common-ancestor-all-creatures_20194_600x450.jpg" class="thumb" alt="http://images.nationalgeographic.com/wpf/media-live/photos/000/201/cache/common-ancestor-all-creatures_20194_600x450.jpg">
</div> 
        
<span class="navButton" id="prev">PREVIOUS</span>
 <span class="navButton" id="next">NEXT</span>

<div style="clear:both;"></div> <div class="here_load"></div>

CSS

.thumb {
    width:160px;
    height:100px
}
.here_load {
    width:300px;
    height:220px;
    background:#f4f4f4;
}
#prev, #next {
    cursor:pointer;
    padding:10px;
    background:#dfdfdf;
}
.new_img {
 width:200px;
 height:160px;   
}

JavaScript

var imagesArray = new Array();
$('.gallery img').each(function () {
    imagesArray.push($(this).attr('alt'));
});

$('.thumb').on('click',function(){
    var thisAlt = $(this).attr('alt');
    $('.here_load').html('<img src="' + thisAlt + '">');
    currentIndex = jQuery.inArray(thisAlt,imagesArray);
    alert(currentIndex);
});

$('.navButton').on('click', function () {
    soThis = $(this).attr('id');
    if (soThis == 'next') {
        imagesArray.push(imagesArray.shift());
    } else {
        imagesArray.unshift(imagesArray.pop());
    }  
    $('.here_load').html('<img src="' + imagesArray[0] + '">');
});