JSFiddle - React, Tailwind, and code Playground

by Maksim

HTML

<div id='gallery'>
    <div class='imgwrapper' id="a">
        <img src='https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2014/05/MorphingButtons.png' title='' alt='' /> <span class='date'>15-02-2013</span>
 <span class='info'>This is the caption of the image along with some other information</span>
 <a href='http://gah-blog.blogspot.com/'>download</a>

    </div>
    <div class='imgwrapper' id="b">
        <img src='https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2014/05/MorphingButtons.png' title='' alt='' /> <span class='date'>10-07-2013</span>
 <span class='info'>This is the caption of the image along with some other information</span>
 <a href='http://gah-blog.blogspot.com/'>download</a>

    </div>
    <div class='imgwrapper' id="c">
        <img src='http://8pic.ir/images/tuwvju35ajgts0rxzufw.jpg' title='' alt='' /> <span class='date'>21-10-2013</span>
 <span class='info'>This is the caption of the image along with some other information</span>
 <a href='http://gah-blog.blogspot.com/'>download</a>

    </div>
    <div class='imgwrapper' id="d">
        <img src='http://8pic.ir/images/usra1shyel8nxudsj8vs.jpg' title='' alt='' /> <span class='date'>02-02-2014</span>
 <span class='info'>This is the caption of the image along with some other information</span>
 <a href='http://gah-blog.blogspot.com/'>download</a>

    </div>
    <div class='imgwrapper' id="e">
        <img src='http://8pic.ir/images/vp7wnu7ohpx2i3im6nem.jpg' title='' alt='' /> <span class='date'>20-05-2014</span>
 <span class='info'>This is the caption of the image along with some other information</span>
 <a href='http://gah-blog.blogspot.com/'>download</a>

    </div>
</div>
<div id="popupbg">
    <div id="popup">
        <div class="pop-img">
            <img src='' title='' alt='' />
        </div>
        <div class="pop-details"> 
            <span class='date'></span>
            <span class='info'></span>
            <a href=''>download</a>
    ...

CSS

#gallery {
    position:relative;
    width:100%;
    background:#e7e7e7;
}
.imgwrapper {
    position:relative;
    width:150px;
    height:150px;
    display:inline-block;
}
.imgwrapper img {
    width:150px;
    height:150px;
}
.imgwrapper span, .imgwrapper a {
    display:none;
}
#popupbg {
    display:none;
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:rgba(0, 0, 0, 0.92);
    z-index:1000;
}
#popup {
    position:relative;
    top:5%;
    margin:0 auto;
    font-size:17px;
    width:600px;
    height:300px;
    background:#fff;
    padding:20px;
    border:solid 10px #CCCCCC;
}
.pop-img {
    min-width:300px;
    max-width:300px;
    max-height:200px;
    float:left;
}
.pop-details {
    float:left;
    width:200px;
    height:auto;
    background-color:red;
    margin-left:15px;
}
#popup img {
    position:relative;
    display:block;
    width:100%;
    height:200px;
}
#popup span.date, #popup span.info, #popup span#close {
    display:block;
}
#nextprev{
    width:100px;
    height:25px;
    top:195px;
    margin:0 auto;
    position:absolute;
}

JavaScript

var status;
$(document).ready(function (e) {
    $(".imgwrapper").click(function () {
        var img = $(' > img', this).attr("src");
        var date = $(' > span.date', this).html();
        var info = $(' > span.info', this).html();
        var a = $(' > a', this).attr("href");
        status=$(this).attr('id');

        $('#popup img').attr("src", img);
        $('#popup span.date').html(date);
        $('#popup span.info').html(info);
        $('#popup a').attr("href", a);

        popup();
    });
});
$(document).ready(function (e) {
    $("button#next").click(function () {
        var c= status.charCodeAt(0);
        status=String.fromCharCode(++c);
        
        if(c==102)
            status="a";
        
        var img = $("div#"+status+" img").attr("src");
        var date = $("div#"+status+" span.date").html();
        var info = $("div#"+status+" span.info").html();
        var a = $("div#"+status+" a").attr("href");

        $('#popup img').attr("src", img);
        $('#popup span.date').html(date);
        $('#popup span.info').html(info);
        $('#popup a').attr("href", a);

    });
});
$(document).ready(function (e) {
    $("button#prev").click(function () {
        var c= status.charCodeAt(0);
        status=String.fromCharCode(--c);

        if(c==96)
            status="e";      
        
        var img = $("div#"+status+" img").attr("src");
        var date = $("div#"+status+" span.date").html();
        var info = $("div#"+status+" span.info").html();
        var a = $("div#"+status+" a").attr("href");

        $('#popup img').attr("src", img);
        $('#popup span.date').html(date);
        $('#popup span.info').html(info);
        $('#popup a').attr("href", a);

    });
});

function popup() {
    $("#popupbg").fadeToggle("slow");
}

$(document).ready(function (e) {
    $("#close").click(function () {
        $("#popupbg").fadeToggle("slow");
    });
});