JSFiddle - React, Tailwind, and code Playground

by raskalbass

HTML

<div class="excurs">
    <p>
        <img src="http://amarant.avkdev.ru/files/excurs/gelen/image031.jpg" alt="" width="200" />
        <img src="http://amarant.avkdev.ru/files/excurs/gelen/image033.jpg" alt="" width="200" />
        <img src="http://placehold.it/800" alt="" width="200" />
    </p>
</div>

CSS

.exmask {
    z-index: 900;
    width:100%;
    height:100%;
    background:black;
    opacity:0.6;
    position:fixed;
    top:0px;
    left:0px;
    display: none;
}
.eximgbig {

    z-index: 999;
    display: none;
}

JavaScript

function exclose() {
    $(".eximgbig").fadeOut();
    $(".exmask").fadeOut();
    setTimeout(function () {
        $(".eximgbig").remove();
        $(".exmask").remove();
    }, 500);
}
$.fn.alignCenterScreen = function() {
    this.css("position", "absolute");
    this.css("top", ($(window).height() - this.outerHeight()) / 2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.outerWidth()) / 2 + $(window).scrollLeft() + "px");
    return this
};
$(function () {
    $(".excurs img").css("cursor", "pointer");
    $(".excurs img").click(function () {
        $("body").append("<div class='exmask'></div>");
        var path = $(this).attr("src");
        $("body").append("<div class='eximgbig'><img src='" + path + "'></div>");
        
        $(".eximgbig").fadeIn(1000);
        $(".exmask").fadeIn();
        var img = new Image();
        img.src = $('.eximgbig img').attr('src');
        img.onload = function () {
            var H = this.height,
                W = this.width;
            $(".eximgbig img").css({
                "width": W,
                "height": H
            });
        };
        $(".eximgbig").alignCenterScreen();
        $(".exmask").click(function () {
            exclose();
        });
        $(".eximgbig").click(function () {
            exclose();
        });
    });
});