JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="layer_over"></div>
<!-- <div class="img_placer"></div> -->


<div class="img_holder"> <span class="imager"></span>
 <span class="prev_div" id="nav">prev</span>  <span class="next_div" id="nav">ne
    
    
    xt</span>  <span class="close_div">X</span> 
</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">
    <img src="http://www.silverdisc.com/images/04/075021390522.jpg " alt="http://s.afisha.ru/MediaStorage/341180f4140c47e98aedb35b1b67.jpg" class="thumb">
</div>

CSS

* {
    margin:0;
    padding:0;
}
.img_placer {
    min-height:100%;
    min-width:100%;
    position:fixed;
    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:none;
}
.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%;
    background:#fff;
    color:#333;
    position:absolute;
}
span.prev_div {
    left:0;
}

JavaScript

var Mplace = $('div.img_holder');
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();
    Mplace.show();
    Lod(GetImgAlt);
});

$('span#nav').on('click', function () {
    if ($(this).attr('class') == 'next_div') {
        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) {
        prevB.hide();
        nextB.show();
    } else if (element.next('img').attr('alt') === undefined) {
        nextB.hide();
        prevB.show();
    } else {
        nextB.show();
        prevB.show();
    }
}


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