https://okoptica.ru/local/templates/okoptica/js/photosw.js

1var initPhotoSwipeFromDOM = function(gallerySelector) {
2
3    // parse slide data (url, title, size ...) from DOM elements
4    // (children of gallerySelector)
5
6    var parseThumbnailElements = function(el) {
7
8        /*  Extension to photoswipe.
9            First fetch the element clicked on.
10            It is used to set the index later */
11        var entryElement = el.querySelectorAll('figure');
12        var element      = entryElement[0].querySelectorAll('a');
13        var firstImage   = element[0].getAttribute('href');
14
15        /*  Extension to photoswipe.
16            Now overwrite variable "el" and populate it with DOM data
17            from the DIV containing the thumbnails                      */
18        var allElm = document.querySelectorAll(gallerySelector);
19        var el     = allElm[0].querySelectorAll('figure');
20
21        var thumbElements = el,
22            numNodes      = thumbElements.length,
23            items         = [],
24            figureEl,
25            linkEl,
26            size,
27            item;
28
29        for (var i = 0; i < numNodes; i++) {
30
31            figureEl = thumbElements[i]; // <figure> element
32
33
34            // include only element nodes
35            if (figureEl.nodeType !== 1) {
36                continue;
37            }
38
39            linkEl = figureEl.children[0]; // <a> element
40
41            size = linkEl.getAttribute('data-size').split('x');
42
43            // create slide object
44            item = {
45                src: linkEl.getAttribute('href'),
46                w:   parseInt(size[0], 10),
47                h:   parseInt(size[1], 10),
48                /*  Extension to photoswipe.
49                    Extend object ITEM with "start". Set to true when it is the
50                    thumbnail clicked in the browser.
51                    Search the source for item.start to see how it is used  */
52                start: linkEl.getAttribute('href') === firstImage ? true : false
53            };
54
55            if (figureEl.children.length > 1) {
56                // <figcaption> content
57                item.title = figureEl.children[1].innerHTML;
58            }
59
60            if (linkEl.children.length > 0) {
61                // <img> thumbnail element, retrieving thumbnail url
62                item.msrc = linkEl.children[0].getAttribute('src');
63            }
64
65            item.el = figureEl; // save link to element for getThumbBoundsFn
66            items.push(item);
67        }
68
69        return items;
70    };
71    // End parseThumbnailElements.
72
73    // find nearest parent element
74    var closest = function closest(el, fn) {
75        return el && (fn(el) ? el : closest(el.parentNode, fn));
76    };
77
78    // triggers when user clicks on thumbnail
79    var onThumbnailsClick = function(e) {
80        e = e || window.event;
81        e.preventDefault ? e.preventDefault() : e.returnValue = false;
82
83        var eTarget = e.target || e.srcElement;
84
85        // find root element of slide
86        var clickedListItem = closest(eTarget, function(el) {
87            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
88        });
89
90        if (!clickedListItem) {
91            return;
92        }
93
94        // find index of clicked item by looping through all child nodes
95        // alternatively, you may define index via data- attribute
96        var clickedGallery = clickedListItem.parentNode,
97            childNodes     = clickedListItem.parentNode.childNodes,
98            numChildNodes  = childNodes.length,
99            nodeIndex      = 0,
100            index;
101
102        for (var i = 0; i < numChildNodes; i++) {
103            if (childNodes[i].nodeType !== 1) {
104                continue;
105            }
106
107            if (childNodes[i] === clickedListItem) {
108                index = nodeIndex;
109                break;
110            }
111            nodeIndex++;
112        }
113
114
115        if (index >= 0) {
116            // open PhotoSwipe if valid index found
117            openPhotoSwipe(index, clickedGallery);
118        }
119        return false;
120    };
121
122    // parse picture index and gallery index from URL (#&pid=1&gid=2)
123    var photoswipeParseHash = function() {
124        var hash   = window.location.hash.substring(1),
125            params = {};
126
127        if (hash.length < 5) {
128            return params;
129        }
130
131        var vars = hash.split('&');
132        for (var i = 0; i < vars.length; i++) {
133            if (!vars[i]) {
134                continue;
135            }
136            var pair = vars[i].split('=');
137            if (pair.length < 2) {
138                continue;
139            }
140            params[pair[0]] = pair[1];
141        }
142
143        if (params.gid) {
144            params.gid = parseInt(params.gid, 10);
145        }
146
147        return params;
148    };
149
150    var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
151        var pswpElement = document.querySelectorAll('.pswp')[0],
152            gallery,
153            options,
154            items;
155
156        items = parseThumbnailElements(galleryElement);
157
158        // define options (if needed)
159        options = {
160
161            // define gallery index (for URL)
162            galleryUID: galleryElement.getAttribute('data-pswp-uid'),
163
164            getThumbBoundsFn: function(index) {
165                // See Options -> getThumbBoundsFn section of documentation for more info
166                var thumbnail   = items[index].el.getElementsByTagName('img')[0], // find thumbnail
167                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
168                    rect        = thumbnail.getBoundingClientRect();
169
170                return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
171
172            }
173
174        };
175
176        // PhotoSwipe opened from URL
177        if (fromURL) {
178            if (options.galleryPIDs) {
179                // parse real index when custom PIDs are used
180                // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
181                for (var j = 0; j < items.length; j++) {
182                    if (items[j].pid == index) {
183                        options.index = j;
184                        break;
185                    }
186                }
187            } else {
188                // in URL indexes start from 1
189                options.index = parseInt(index, 10) - 1;
190            }
191        } else {
192            options.index = parseInt(index, 10);
193        }
194
195        // exit if index not found
196        if (isNaN(options.index)) {
197            return;
198        }
199
200        if (disableAnimation) {
201            options.showAnimationDuration = 0;
202        }
203
204        /*  Extension to photoswipe.
205            Set index with item.start */
206        for (var findInd = 0; findInd < items.length; findInd++) {
207            if (items[findInd].start) {
208                options.index = findInd;
209                break;
210            }
211        }
212
213        // Pass data to PhotoSwipe and initialize it
214        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
215        gallery.init();
216    };
217
218    // loop through all gallery elements and bind events
219    var galleryElements = document.querySelectorAll(gallerySelector);
220
221    for (var i = 0, l = galleryElements.length; i < l; i++) {
222        galleryElements[i].setAttribute('data-pswp-uid', i + 1);
223        galleryElements[i].onclick = onThumbnailsClick;
224    }
225
226    // Parse URL and open gallery if it contains #&pid=3&gid=1
227    var hashData = photoswipeParseHash();
228    if (hashData.pid && hashData.gid) {
229        openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
230    }
231
232};
233
234// execute above function
235initPhotoSwipeFromDOM('.photos__slider');
236
237