https://www.justbob.de/wp-content/plugins/woocommerce-embed-videos…/assets/js/photoswipe.js

1jQuery(window).load(function(){
2    var height = jQuery('.woocommerce-product-gallery__wrapper div')[0];
3    jQuery('iframe').attr('height',height);
4});
5jQuery('.woocommerce-product-gallery').each(function() {
6    jQuery(this).find('[data-thumb]').each(function() {
7        jQuery(this).attr('data-size', jQuery(this).find('img').attr('width')+ 'x' + jQuery(this).find('img').attr('height'));
8    });
9});
10
11var initPhotoSwipeFromDOM = function(gallerySelector) {
12
13    // parse slide data (url, title, size ...) from DOM elements
14    // (children of gallerySelector)
15    var parseThumbnailElements = function(el) {
16        var thumbElements = jQuery(el).find('.woocommerce-product-gallery__image:not(.isotope-hidden)').get(),
17            numNodes = thumbElements.length,
18            items = [],
19            figureEl,
20            linkEl,
21            size,
22            item;
23
24        for (var i = 0; i < numNodes; i++) {
25
26            figureEl = thumbElements[i]; // <figure> element
27
28            // include only element nodes
29            if (figureEl.nodeType !== 1) {
30                continue;
31            }
32
33            linkEl = figureEl.children[0]; // <a> element
34
35            //size = linkEl.getAttribute('data-size').split('x');
36            size1 = jQuery(linkEl).find('img').attr('data-large_image_width');
37            size2 = jQuery(linkEl).find('img').attr('data-large_image_height');
38
39            // create slide object
40            if (jQuery(linkEl).data('type') == 'video') {
41                item = {
42                    html: jQuery(linkEl).data('video')
43                };
44            } else {
45                item = {
46                    src: linkEl.getAttribute('href'),
47                    w: parseInt(size1 , 10),
48                    h: parseInt(size2, 10)
49                };
50            }
51
52            if (figureEl.children.length > 1) {
53                // <figcaption> content
54                item.title = jQuery(figureEl).find('.caption').html();
55            }
56
57            if (linkEl.children.length > 0) {
58                // <img> thumbnail element, retrieving thumbnail url
59                item.msrc = linkEl.children[0].getAttribute('src');
60            }
61            item.title = jQuery(linkEl).find('img').attr('title');
62            item.el = figureEl; // save link to element for getThumbBoundsFn
63            items.push(item);
64        }
65
66        return items;
67    };
68
69    // find nearest parent element
70    var closest = function closest(el, fn) {
71        return el && (fn(el) ? el : closest(el.parentNode, fn));
72    };
73
74    function hasClass(element, cls) {
75        return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
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 (hasClass(el, 'woocommerce-product-gallery__image'));
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.closest('.woocommerce-product-gallery'),
97            childNodes = jQuery(clickedListItem.closest('.woocommerce-product-gallery')).find('.woocommerce-product-gallery__image:not(.isotope-hidden)').get(),
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        if (index >= 0) {
115            // open PhotoSwipe if valid index found
116            openPhotoSwipe(index, clickedGallery);
117        }
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        items = parseThumbnailElements(galleryElement);
156
157        // define options (if needed)
158        options = {
159
160            closeOnScroll: false,
161
162            // define gallery index (for URL)
163            galleryUID: galleryElement.getAttribute('data-pswp-uid'),
164
165            /*getThumbBoundsFn: function(index) {
166              // See Options -> getThumbBoundsFn section of documentation for more info
167              var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
168                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
169                rect = thumbnail.getBoundingClientRect();
170
171              return {
172                x: rect.left,
173                y: rect.top + pageYScroll,
174                w: rect.width
175              };
176            }*/
177
178        };
179
180        // PhotoSwipe opened from URL
181        if (fromURL) {
182            if (options.galleryPIDs) {
183                // parse real index when custom PIDs are used
184                // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
185                for (var j = 0; j < items.length; j++) {
186                    if (items[j].pid == index) {
187                        options.index = j;
188                        break;
189                    }
190                }
191            } else {
192                // in URL indexes start from 1
193                options.index = parseInt(index, 10) - 1;
194            }
195        } else {
196            options.index = parseInt(index, 10);
197        }
198
199        // exit if index not found
200        if (isNaN(options.index)) {
201            return;
202        }
203
204        if (disableAnimation) {
205            options.showAnimationDuration = 0;
206        }
207
208        // Pass data to PhotoSwipe and initialize it
209        var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
210        gallery.init();
211        gallery.listen('beforeChange', function() {
212            var currItem = jQuery(gallery.currItem.container);
213            jQuery('.pswp__video').removeClass('active');
214            jQuery('.pswp__caption .pswp__caption__center').removeClass('active');
215            var currItemIframe = currItem.find('.pswp__video').addClass('active');
216            jQuery('.pswp__video').each(function() {
217                if (!jQuery(this).hasClass('active')) {
218                    jQuery(this).attr('src', jQuery(this).attr('src'));
219                }
220            });
221        });
222
223        gallery.listen('close', function() {
224            jQuery('.pswp__video').each(function() {
225                jQuery(this).attr('src', jQuery(this).attr('src'));
226            });
227        });
228
229    };
230
231    // loop through all gallery elements and bind events
232    var galleryElements = document.querySelectorAll(gallerySelector);
233
234    for (var i = 0, l = galleryElements.length; i < l; i++) {
235        galleryElements[i].setAttribute('data-pswp-uid', i + 1);
236        galleryElements[i].onclick = onThumbnailsClick;
237    }
238
239    // Parse URL and open gallery if it contains #&pid=3&gid=1
240    var hashData = photoswipeParseHash();
241    if (hashData.pid && hashData.gid) {
242        openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
243    }
244
245};
246
247// execute above function
248
249initPhotoSwipeFromDOM('.woocommerce-product-gallery');