https://cliniquelaprairie.com/wp-content/themes/cn-core-theme/assets/js/modules/image-gallery.js

1var CN = CN || {};
2
3CN.ImageGallery = function(el) {
4
5    this.elements = {
6        base: el,
7        photoswipe: $('.js-photoswipe-container')
8    };
9
10    // Initialise this module
11    this.init();
12};
13
14CN.ImageGallery.prototype.init = function() {
15
16    var _this = this;
17
18    if(!_this.elements.photoswipe.find('.pswp__slide-indicators').length){
19        _this.elements.photoswipe.find('.pswp__ui').append($('<div class="pswp__slide-indicators"></div>'))
20    }
21
22    _this.elements.base.on('click', '.js-gallery-trigger', function(e) {
23
24        e.preventDefault();
25
26        var _thisEl = $(this),
27            parentEl = _thisEl.parents('.js-thumbnail'),
28            thumbnailsEl = _this.elements.base.find('.js-thumbnail:not(.isotope-hidden)'),
29            index = thumbnailsEl.index(parentEl);
30
31        var images = thumbnailsEl.get().map( function(item) {
32
33            var itemEl = $(item),
34                dataEl = itemEl.children().first();
35
36            if (dataEl.data('media-type') === 'video') {
37                var data = {
38                    html: dataEl.data('html')
39                };
40            } else {
41                var data = {
42                    title: dataEl.data('caption'),
43                    src: dataEl.attr('href'),
44                    w: dataEl.data('width'),
45                    h: dataEl.data('height')
46                };
47            }
48
49            return data;
50        });
51
52        var options = {
53            index: index,
54            history: false,
55            showHideOpacity: true,
56            getThumbBoundsFn: function(index) {
57                var thumbnailEl = _thisEl.find('img, .c-image')[0];
58
59                if (thumbnailEl) {
60                    var pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
61                    var rect = thumbnailEl.getBoundingClientRect();
62
63                    return {
64                        x: rect.left,
65                        y: rect.top + pageYScroll,
66                        w: rect.width
67                    };
68                }
69            }
70        };
71
72        var slideIndicators = _this.elements.photoswipe.find('.pswp__slide-indicators')
73
74        slideIndicators.empty()
75
76        images.forEach(function(){
77            slideIndicators.append('<span class="pswp__slide-indicator"></div>')
78        })
79
80        var photoswipe = new PhotoSwipe(_this.elements.photoswipe[0], PhotoSwipeUI_Default, images, options);
81
82        photoswipe.listen('initialZoomIn', function() {
83            $('body').addClass('photoswipe-is-active');
84        });
85
86        photoswipe.listen('initialZoomOut', function() {
87            $('body').removeClass('photoswipe-is-active');
88        });
89
90        photoswipe.listen('beforeChange', function() {
91            var currentItem = photoswipe.currItem;
92
93            if (currentItem.hasOwnProperty('html') && window.currentVideoPlayer) {
94                try {
95                    window.currentVideoPlayer.stop();
96                }
97                catch (err) {}
98            }
99        });
100
101        photoswipe.listen('afterChange', function() {
102            var currentItem = photoswipe.currItem;
103
104            if (currentItem.hasOwnProperty('html')) {
105                var videoEl = $(currentItem.container).find('> div');
106
107                if (!videoEl.hasClass('plyr')) {
108                    window.currentVideoPlayer = new Plyr(videoEl);
109                }
110
111                setTimeout(function () {
112                    window.currentVideoPlayer.play();
113                }, 1000);
114            }
115
116            slideIndicators.children().each((i, el) => $(el).toggleClass('is-active', photoswipe.getCurrentIndex() == i))
117
118            $(document).trigger('photoSwipeSlideUpdate')
119        });
120
121        photoswipe.listen('afterInit', function() {
122            photoswipe.shout('bindEvents')
123            $(document).trigger('photoSwipeSlideUpdate')
124        })
125
126        photoswipe.init();
127
128    });
129
130};