JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div id="con_gallery">
    <div>
        <div>
            <img src="http://bbs.nashalife.ru/attachment_200_d5a28332343133f9a1162b8994a1f4a8.jpg " class="imghov" id="22" alt="http://img12.nnm.ru/e/7/0/9/5/e7095bd90e22a110f92f559ba3ae3216_full.jpg">
        </div>
    </div>
    <div>
        <div>
            <img src="http://www.avazun.ru/images/2009/11/24/15/31/For-girls_59327.jpg" class="imghov" id="55" alt="http://www.wordtravels.com/dbpics/new%20countries/South%20Africa/whitelionSEP08.jpg">
        </div>
    </div>
    <div>
        <div>
            <img src="http://cft3.igromania.ru/upload/articles/115/57805/km_1s.jpg" class="imghov" id="99" alt="http://www.internetactu.net/wp-content/uploads/2011/11/lolcat06-300x216.jpg">
        </div>
    </div>
</div>
<br>
<br>
<div id="tex"></div>

CSS

* {
    padding:0;
    margin:0;
}
#con_gallery img {
    float:left;
    width:100px;
    height:80px;
}
#overlay {
    opacity:0.5;
    position:fixed;
    float:left;
    background:#666;
    display:none;
    z-index:17;
    min-height:100%;
    min-width:100%;
}
#img_placer {
    min-height:100%;
    min-width:100%;
    position:absolute;
    display:none;
    z-index:18;
}
#img_holder {
    z-index:20;
    background:url('http://s20.postimg.org/r630mhhft/249_1.gif') center center no-repeat #fff;
    height:60px;
    width:60px;
    overflow:hidden;
    position:relative;
    border-radius:4px;
    box-shadow:0 3px 6px #000;
    border:1px solid silver;
    padding:8px;
    margin:0 auto;
    display:block;
}
#img_holder img {
    display:none;
}
.btn {
    z-index:30;
    font-size:11px;
    cursor:pointer;
    padding:10px;
    position:absolute;
    background:white;
    margin-top:-20px;
    top:50%;
}
#prev {
    left:0;
}
#next {
    right:0;
}

JavaScript

var imgArray = [];
var imGs = $('.imghov');
var i = 2;
var prePart = '<div id="overlay"></div><div id="img_placer"><div id="img_holder"><span id="next" class="btn">NEXT</span><span id="prev" class="btn">PREV</span></div></div>';

$('body').prepend(prePart);
var btn = $('.btn');
var placer_img = $('#img_placer');
var holder_empty = $('#img_holder');


imGs.each(function () {
    var attR = $(this).attr('alt');
    imgArray.push(attR);
});


imGs.click(function () {
    var load_image = $(this).attr('alt');
    i = imgArray.indexOf(load_image);
    console.log(i);
});

function loadImg() {
    placer_img.show().siblings('div').show();
    holder_empty.append('<img src="' + imgArray[i] + '">');
    holder_img = $('img', holder_empty);
    holder_img.bind('load', function () {
        if (holder_img.length) {
            holder_empty.animate({
                width: holder_img.width(),
                height: holder_img.height(),
                marginTop: (holder_img.height() / 2)
            }, function () {
                $('img', this).fadeIn();
            });
        }
    });
}

loadImg();

$('.btn').click(function () {
    $('img', holder_empty).remove();
    if ($(this).attr('id') === "next") {
        i++;
        if (i === imgArray.length) i = 0;
    } else {
        i--;
        if (i === -1) i = imgArray.length - 1;
    }
    console.log(i);
    loadImg();
});