http://vnezavisimost.ru/wp-content/themes/root/js/lightbox.js

1/**
2 * WPShop Lightbox
3 *
4 * @version   1.0.1
5 *
6 * Changelog
7 *
8 * 1.0.1    2019-11-07      Add image check formats: webp, svg
9 */
10
11(function(window, document, $) {
12    "use strict";
13
14    // jquery required
15    if (!$) return;
16
17    $.fn.wpshoplightbox = function(options) {
18        var selector;
19        var $this = $(this);
20
21        var container =
22                '<div class="wpshoplightbox-container" role="dialog" tabindex="-1">' +
23                '<div class="wpshoplightbox-bg"></div>' +
24                '<div class="wpshoplightbox-inner">' +
25                '<div class="wpshoplightbox-close"><svg width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M-1-1h19v19h-19z"/><path fill="#fff" d="M8.485 7.071l-7.071-7.071-1.414 1.414 7.071 7.071-7.071 7.071 1.414 1.414 7.071-7.071 7.071 7.071 1.414-1.414-7.071-7.071 7.071-7.071-1.414-1.414-7.071 7.071z"/></svg></div>' +
26                '<div class="wpshoplightbox-body"><div class="wpshoplightbox-image"></div></div>' +
27                '<div class="wpshoplightbox-caption"></div>' +
28                "</div>" +
29                "</div>",
30            $container = $(container);
31
32        options = options || {};
33
34        // on click on link with href
35        $this.on('click', function(){
36
37            var $current = $(this);
38            var image_src = $current.attr('href');
39            var img = document.createElement("img"),
40                $img = $(img);
41
42            if ( image_src.match(/(\.jpg|\.gif|\.jpeg|\.png|\.webp|\.svg)$/i) ) {
43
44                $img.attr('src', image_src);
45
46                // append container
47                var box = $container.appendTo("body")[0];
48
49                // scroll disappear fix
50                $('head').append(
51                    '<style id="wpshoplightbox-scroll-style" type="text/css">.wpshoplightbox-scroll{margin-right:' +
52                    (window.innerWidth - document.documentElement.clientWidth) +
53                    "px;}</style>"
54                );
55                $('body').addClass('wpshoplightbox-scroll');
56
57                // add image in lightbox
58                $container.find('.wpshoplightbox-image').html($img);
59
60                // timeout need for animation
61                setTimeout(function () {
62                    $container.addClass('wpshoplightbox--open');
63                }, 10);
64
65                return false;
66
67            }
68        });
69
70
71        $(document).on('click', '.wpshoplightbox-body, .wpshoplightbox-close', function() {
72            close();
73        });
74
75        function close() {
76            $(document).find('.wpshoplightbox-container').removeClass('wpshoplightbox--open');
77            setTimeout(function(){
78                $(document).find('.wpshoplightbox-container').remove();
79            }, 400);
80            $('body').removeClass('wpshoplightbox-scroll');
81            $("#wpshoplightbox-scroll-style").remove();
82        }
83
84    };
85
86})(window, document, jQuery);