https://matras-vladikavkaz.ru/js/color_gallery.js

1
2function color_img_popup_init(dn_color_btns, sender, trigger_change)
3{
4    if(dn_color_btns.length)
5    {
6        var _ = $(sender);
7
8        var slides = [];
9
10        var index = 0;
11        var active = 0;
12
13        dn_color_btns.each(function()
14        {
15            var label = $(this).
16                closest('.color-block-item').
17                    find('label');
18
19            var img = label.find('img');
20
21            var width = img.prop('naturalWidth');
22            var height = img.prop('naturalHeight');
23
24            slides.push({w: width, h:height, title: $('> div', label).html(), 
25                idcolor: $(this).data('idcolor'), img_src: $(this).data('img'), 
26                    src: $(this).data('img')});
27
28            if($(this).is(_))
29                active = index;
30
31            index++;
32        });
33
34        module_loader.load('photoswipe', function() 
35        {
36            openPhotoSwipe({slides:slides, index:active});
37        });
38
39        return false;
40    }
41}
42
43
44function addPhotoswipeHtml()
45{
46    $('#vp-photo-swipe').remove();
47    
48    var html = "<div class='pswp' id='vp-photo-swipe' tabindex='-1' role='dialog' aria-hidden='true' style='display:none'>\
49        <div class='pswp__bg'></div>\
50        <div class='pswp__scroll-wrap'>\
51            <div class='pswp__container'>\
52                <div class='pswp__item'></div>\
53                <div class='pswp__item'></div>\
54                <div class='pswp__item'></div>\
55            </div>\
56            <div class='pswp__ui pswp__ui--hidden'>\
57                <div class='pswp__top-bar'>\
58                    <div class='pswp__counter'></div>\
59                    <button class='pswp__button pswp__button--close' title='Close (Esc)'></button>\
60                    <button class='pswp__button pswp__button--share' title='Share'></button>\
61                    <button class='pswp__button pswp__button--fs' title='Toggle fullscreen'></button>\
62                    <button class='pswp__button pswp__button--zoom' title='Zoom in/out'></button>\
63                    <div class='pswp__preloader'>\
64                        <div class='pswp__preloader__icn'>\
65                            <div class='pswp__preloader__cut'>\
66                                <div class='pswp__preloader__donut'></div>\
67                            </div>\
68                        </div>\
69                    </div>\
70                </div>\
71                <div class='pswp__share-modal pswp__share-modal--hidden pswp__single-tap'>\
72                    <div class='pswp__share-tooltip'></div> \
73                </div>\
74                <button class='pswp__button pswp__button--arrow--left' title='Previous (arrow left)'>\
75                </button>\
76                <button class='pswp__button pswp__button--arrow--right' title='Next (arrow right)'>\
77                </button>\
78                <div class='pswp__caption'>\
79                    <div class='pswp__caption__center'></div>\
80                </div>\
81            </div>\
82        </div>\
83    </div>";
84    
85    $('body').append(html);
86}
87
88function openPhotoSwipe(img_selector, slide_change)
89{
90    var carousel = $(this);
91    
92    addPhotoswipeHtml();
93    
94    var psElement = $('#vp-photo-swipe');
95    
96    function getGalleyImages()
97    {
98        var index = 0;
99        var activeID = 0;
100        var slides = new Array();
101        
102        $(img_selector).each(function() 
103        {
104            var img = $(this);
105
106            var width = img.prop('naturalWidth');
107            var height = img.prop('naturalHeight');
108
109            var img_src = img.attr('data-img-src') || img.attr('data-src') || img.attr('src');
110
111            slides.push({w: width, h:height, img_src: img_src, src: img.attr('data-src') || img.attr('src')});
112            
113            if($(this).parent().hasClass('active'))
114                activeID = index;
115            
116            index++;
117        });
118
119        return {slides: slides, index: parseInt(activeID)};
120    }
121    
122    if(typeof(img_selector) === 'object' && img_selector.slides)
123        var images = img_selector;
124    else
125        var images = getGalleyImages();
126
127    var pswpElement = psElement.show().get(0);
128    
129    var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, images.slides, {index:images.index, history: false, focus: false, shareEl: false});
130    
131    if(slide_change || 0)
132    {
133        gallery.listen('afterChange', function() { 
134            carousel.carousel(gallery.getCurrentIndex());
135        });
136    }
137    
138    gallery.listen('gettingData', function(index, item) {
139
140        if(item.img_src !== null)
141        {
142            var img = new Image();
143
144            img.onload = function() 
145            {
146                item.w = this.width; 
147                item.h = this.height;
148                item.src = this.src;
149                
150                item.img_src = null;
151
152                gallery.invalidateCurrItems();
153                gallery.updateSize(true);
154            };
155
156            img.src = item.img_src;
157        }
158    });
159
160
161    gallery.init();
162}