JSFiddle - React, Tailwind, and code Playground

by Jader Wagner

HTML

<div id="overlayFancy">
    <div class="imgSlide">
        <div id="prev">&#x3C;&#x3C;</div>
        <div id="next">&#x3E;&#x3E;</div>
    </div>
</div>.......
<div id="projectImgs">
    <div data-image="http://www.tempstreet.com/wp-content/uploads/2014/07/Image-3.jpg" class="wrapperExtraImg" style="background-image:url(http://www.tempstreet.com/wp-content/uploads/2014/07/Image-3-150x150.jpg)"></div>
    <div data-image="http://www.tempstreet.com/wp-content/uploads/2014/07/Image-4.jpg" class="wrapperExtraImg" style="background-image:url(http://www.tempstreet.com/wp-content/uploads/2014/07/Image-4-150x150.jpg)"></div>
    <div data-image="http://www.tempstreet.com/wp-content/uploads/2014/07/Image-5.jpg" class="wrapperExtraImg" style="background-image:url(http://www.tempstreet.com/wp-content/uploads/2014/07/Image-5-150x150.jpg)"></div>
</div>

CSS

#projectImgs div {
    display:inline-block;
    width:150px;
    height:150px;
    margin-right:10px;
}
#overlayFancy {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color:#ccc;
    display:none;
}
#overlayFancy img {
    max-width:500px;
}
#prev {
    display:inline-block;
    background-color:red;
    cursor:pointer;
}
#next {
    display:inline-block;
    background-color:blue;
    cursor:pointer;
}

JavaScript

$(document).on('click', '.wrapperExtraImg', function () {
    $("#overlayFancy .imgSlide").append("<img src='" + $(this).data('image') + "' data-index='" + $(this).index() + "'>");
    $('#overlayFancy .imgSlide').width($('#overlayFancy .imgSlide img').width());
    $("#overlayFancy").stop().fadeIn(500);
});


$(document).on('click', '#overlayFancy img, #prev, #next', function (event) {
    event.stopPropagation();
});

$(document).on('click', '#overlayFancy', function () {
    $('#overlayFancy').stop().fadeOut(300, function () {
        $(this).find('img').remove();
    });
});

$(document).on('click', '#prev', function () {
    var index = $('#overlayFancy .imgSlide img').data('index');
    if (index == 0) index = $('.wrapperExtraImg').length;
    index--;

    $('#overlayFancy .imgSlide img').fadeOut(500, function () {
        $(this).data('index', index).attr('src', $('.wrapperExtraImg:eq(' + index + ')').data('image')).fadeIn(500);
    })
});

$(document).on('click', '#next', function () {
    var index = $('#overlayFancy .imgSlide img').data('index');
    index++;
    if (index == $('.wrapperExtraImg').length) index = 0;
    $('#overlayFancy .imgSlide img').fadeOut(500, function () {
        $(this).data('index', index).attr('src', $('.wrapperExtraImg:eq(' + index + ')').data('image')).fadeIn(500);
    })
});