JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="layer_over"></div>
<div class="img_placer">
    <div class="img_holder"> <span class="imager"></span>
 <span class="prev_div" id="nav">prev</span>  <span class="next_div" id="nav">next</span>  <span class="close_div">X</span> 
    </div>
</div>
<div class="gallery">
    <img src="http://dvd-tub-e.ru/images/films/shot/614_4.jpg" alt="http://itc.ua/img/dpk/2006/03/013915.jpg" class="thumb">
</div>

CSS

* {
    margin:0;
    padding:0;
}
.img_placer {
    min-height:100%;
    min-width:100%;
    position:fixed;
    display:none;
    z-index:100;
}
.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:100px auto;
    display:block;
}
.layer_over {
    opacity:0.5;
    position:fixed;
    float:left;
    display:none;
    background:#666;
    zindex:50;
    min-height:100%;
    min-width:100%;
}
.img_holder img {
    display:none;
}
.gallery {
    z-index:50000;
}
.gallery img {
    cursor:pointer;
    height:80px;
    width:100px;
}
span.close_div {
    font-family:Calibri;
    line-height:25px;
    padding:0 10px;
    right:0;
    cursor:pointer;
    top:0;
    background:#fff;
    color:#333;
    position:absolute;
}
span.next_div, span.prev_div {
    font-family:Calibri;
    line-height:25px;
    padding:0 10px;
    right:0;
    display:block;
    text-align:center;
    width:60px;
    cursor:pointer;
    margin-top:-13px;
    top:50%;
    display:none;
    background:#fff;
    color:#333;
    position:absolute;
}
span.prev_div {
    left:0;
}

JavaScript

var Lover = $('div.layer_over');
var Mplace = $('div.img_placer');
var placer = $('div.img_holder span.imager');
var nextB = $('span.next_div');
var prevB = $('span.prev_div');

$('.thumb').on('click', function () {
    var GetImgAlt = $(this).attr('alt');
    currentImage = $(this);
    placer.empty();
    Lover.show();
    Mplace.show();
    Lod(GetImgAlt);
});

$('span#nav').on('click', function () {
    if ($(this).attr('class') == 'next_div') {
        var nextImg = currentImage.next('img');
    } else {
        nextImg = currentImage.prev('img');
    }
    var nextImgA = nextImg.attr('alt');
    currentImage = nextImg;
    placer.empty();
    Lod(nextImgA);
});



//checker CHECker
function checkButtons(element) {
    if (element.prev('img').attr('alt') === undefined && element.next('img').attr('alt') === undefined) {
        prevB.hide();
        nextB.hide();
    } else if (element.next('img').attr('alt') === undefined) {
        nextB.hide();
        prevB.show();
    } else if (element.prev('img').attr('alt') === undefined) {
        nextB.show();
        prevB.hide();
    } else {
        nextB.show();
        prevB.show();
    }
}


function Lod(element) {
    placer.append('<img src="' + element + '">');
    $('img', placer).bind('load', function () {
        if ($('img', placer).length) {
            var nHeight = $(this).height();
            var nWidth = $(this).width();
            placer.parent('div').animate({
                height: nHeight,
                width: nWidth
            }, 500, function () {
                placer.children('img').fadeIn();
                checkButtons(currentImage);
            });
        }
    });
}


$('span.close_div').on('click', function () {
    Mplace.fadeOut('normal', function () {
        placer.empty().parent('div').removeAttr('style');
        nextB.hide();
        prevB.hide();
        Lover.fadeOut('normal');
    });
});