JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="pre_load"></div>
<div class="overlay_p">
    <p class="aligner"> <span class="hold_all" id="all_here"> 
        <span class="p_img"></span>
 <span class="prev_div">prev</span>  <span class="next_div">next</span>  <span class="close_div">X</span>
</span>
    </p>
</div>
<div class="img_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>

CSS

html, body {
    height:1000px;
    width:100%;
}
* {
    padding:0;
    margin:0;
}
a {
    text-decoration:none;
}
.overlay_p {
    position:fixed;
    width:100%;
    z-index:10;
    display:none;
    min-height:100%;
    background:url('http://s20.postimg.org/5c4ymoxah/image.png');
}
p.aligner {
    z-index:50;
    min-height:60px;
    min-width:60px;
    margin:150px auto;
    line-height:0;
    overflow:hidden;
    border:1px solid silver;
    position:relative;
    padding:8px;
    background:url('http://s20.postimg.org/r630mhhft/249_1.gif') center center no-repeat #fff;
    display:table;
}
p.aligner img {
    vertical-align:top;
}
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;
}
.pre_load {
    position:fixed;
    top:-2000px;
}
.thumb {
    height:100px;
    width:150px;
}
.hold_all {
    display:none;
}
img_gallery a {
    display:table;
    float:left;
    position:relative;
}
img_gallery a img {
    float:left;
}
.click {
    border:2px solid red;
}

JavaScript

// define globals
overL = $('div.overlay_p');
temP = $('div.pre_load');
imgM = $('span.p_img');
fCont = $('p.aligner');
allin = $('span.hold_all');
imGal = $('.img_gallery');
orImg = $('.img_gallery img');


// function on img click
orImg.on('click', function () {
    clearAll();
    overL.fadeIn();
    var oImg = $(this).attr('alt');
    temP.html('<img src="' + oImg + '"/>');
    currentImage = orImg;
    var dUrl = $('img', temP);
    getDim(dUrl, oImg);

});


// fucntion on NEXT click
$('span.next_div').on('click', function () {
    currentImage.css({ padding : 10 });
    
});


// fucntion on PREV click
$('span.prev_div').on('click', function () {
    GoToPrev();
});



function GoToPrev() {
    imgM.fadeOut().delay(600).empty().fadeIn();
    var oImg = orImg.prev('img').attr('alt');
    temP.html('<img src="' + oImg + '"/>');
    var dUrl = $('img', temP);
    getDim(dUrl, oImg);
}

// get WIDTh and HEIGHT of the loaded IMAGE, and load into p_img
function getDim(element, element2) {
    var imgW = element.width();
    var imgH = element.height();
    fCont.animate({
        width: imgW,
        height: imgH
    }, 600, function () {
        imgM.html('<img src="' + element2 + '"/>').parent('span').fadeIn(400);
    });
}


//clear cocntainers
function clearAll() {
    temP.empty();
    imgM.empty();
}

//on CLOSE click
$('span.close_div').on('click', function () {
    allin.fadeOut(300, function () {
        fCont.fadeOut(function () {
            overL.fadeOut(function () {
                fCont.attr('style', '');
            });
            clearAll();
        });
    });
});