https://portal.pixevety.com/js/commons/image-overlay.js?v=yUD1-H_tNGRFhrvm91rZMII-LejUEPBKYG2LuTlwfeU

1/*
2 * Image overlay
3 */
4
5var ImageOverlay = function () {
6    this.Create();
7    this.CreateEvents();
8};
9ImageOverlay.prototype.Create = function () {
10    if ($('.img-overlay').length === 0) {
11        var html = '<div class="img-overlay"><div class="img-wrapper"></div></div>';
12        $(html).appendTo($('body'));
13    }
14};
15ImageOverlay.prototype.CreateEvents = function (node) {
16    var self = this;
17
18    if (node) {
19        $(node).find('img[data-overlay]').on("click",
20            function (e) {
21                e.preventDefault();
22                self.Open($(this));
23            }
24        );
25
26        $(document).click(function (e) {
27            if ($('.img-overlay .img-wrapper').is(":visible")) {
28                self.Hide();
29            }
30        });
31
32    } else {
33        $("body").on("click", "img[data-overlay]",
34            function(e) {
35                e.preventDefault();
36                self.Open($(this));
37            }
38        );
39
40        $(document).click(function (e) {
41            if ($('.img-overlay .img-wrapper').is(":visible")) {
42                self.Hide();
43            }
44        });
45    }
46};
47ImageOverlay.prototype.Open = function (eventNode) {
48    var self = this;
49    self.Hide();
50
51    var imgSrc = eventNode.data('overlay');
52    if (!imgSrc || imgSrc.length === 0) {
53        imgSrc = eventNode.attr('src');
54    }
55    self.OpenWithSource(imgSrc);
56
57};
58ImageOverlay.prototype.OpenWithSource = function (src) {
59
60    var self = this;
61    self.Hide();
62
63    var node = $('.img-overlay .img-wrapper');
64    node.empty();
65
66    var imgNode = $('<img id="OverlayImage" alt="" />').appendTo(node);
67    var closeNode = $('<div class="img-close"><i class="fa fa-times-circle"></i></div>').appendTo(node);
68
69    imgNode.on('load', function (e) {
70        self.Show();  // must be visible before determining the width/height of the image or we get 0/zero back
71        self.PositionImage($(this));
72    });
73
74    $(window).on('resize orientationChange', function (event) {
75        waitForFinalEvent(function () {
76            var img = $('.img-overlay .img-wrapper img');
77
78            self.PositionImage(img);
79
80        }, 100, "ImageOverlayScreenResize");
81    });
82
83    imgNode.attr('src', src);
84};
85
86
87ImageOverlay.prototype.Show = function () {
88    $('.img-overlay').show();
89};
90ImageOverlay.prototype.Hide = function () {
91    $('.img-overlay').hide();
92};
93ImageOverlay.prototype.PositionImage = function (img) {
94    //log.info('position image...');
95    var topPosn = -1 * img.height() / 2;
96    var leftPosn = -1 * img.width() / 2;
97
98    img.css("top", topPosn)
99        .css("left", leftPosn);
100
101    topPosn -= 15;
102    leftPosn -= 17;
103    $('.img-overlay .img-wrapper .img-close').css("top", topPosn).css("right", leftPosn);
104};