https://handisport-meuse.org/components/com_droppics/assets/js/colorbox.init.js

1var resizeTimer;
2var droppicsSriptImageloadedLoaded;
3var w = window.innerWidth
4    || document.documentElement.clientWidth
5    || document.body.clientWidth;
6
7var h = window.innerHeight
8    || document.documentElement.clientHeight
9    || document.body.clientHeight;
10
11jQuery(document).ready(function($) {
12    (droppicsColorboxInit = function(){
13
14
15        droppicsSriptImageloadedLoaded=setInterval(function(){
16            if(typeof(window.droppicsHeadLoaded)==='undefined' || 
17                (typeof(window.droppicsHeadLoaded)==='boolean' && window.droppicsHeadLoaded===true)){
18                    $('.droppicslightboxsingle').colorbox({title:function(){
19                                return $(this).data('title');
20                        },maxWidth:'90%',maxHeight:'90%',className: 'droppics',iframe:true,width:'100%',height:'100%'});
21                    $('.droppicslightbox').each(function(){
22                        var id_gallery =  $(this).data('id');
23                        $(this).find('.wimg.droppicslightbox a').colorbox({
24                            title:function(){
25                                return $(this).data('title');
26                            },
27                            rel: 'droppicgallery'+id_gallery,
28                            maxWidth:'90%',maxHeight:'90%',className: 'droppics',
29                            onComplete:function(){
30                                $('#cboxLoadedContent .cboxPhoto').attr('title',$(this).find('img').attr('title'));
31                                $('#cboxLoadedContent .cboxPhoto').attr('alt',$(this).find('img').attr('alt'));
32                            }
33                        });
34                        
35                    });
36                    $('.droppicsgallery').each(function(){   
37                 
38                        $(this).find('.wimg.droppicsvideo a').colorbox({  
39                           title:function(){                               
40                                return $(this).data('title');
41                           },
42                           iframe:true, innerWidth: 640, innerHeight: 390,
43                            maxWidth:'90%',maxHeight:'90%',className: 'droppics',
44                            onComplete:function(){
45                               
46                               $(this).colorbox.resize({innerWidth:$(this).data('vwidth'), innerHeight: $(this).data('vheight')} ); 
47                               //fix over the full-screen button
48                               $("#cboxNext, #cboxPrevious").css("height","85%")                                
49                            }
50                        });
51                    });
52                    
53                    $('.droppicssinglevideo').each(function(){   
54                          $(this).find('a').colorbox({  
55                           title:function(){                               
56                                return $(this).data('title');
57                           },
58                           iframe:true, innerWidth: 640, innerHeight: 390,
59                            maxWidth:'90%',maxHeight:'90%',className: 'droppics',
60                            onComplete:function(){
61
62                                var rw = Math.min($(this).data('vwidth'), w * 0.9);
63                                var rh = $(this).data('vheight') / $(this).data('vwidth') * rw;
64                                $(this).colorbox.resize({innerWidth: rw, innerHeight: rh} );
65                               //fix over the full-screen button
66                               $("#cboxNext, #cboxPrevious").css("height","85%")                                
67                            }
68                        });
69                    })
70                    $('.droppicssingleimage').colorbox({title:function(){
71                                return $(this).data('title');
72                        },maxWidth:'90%',maxHeight:'90%',className: 'droppics'});
73
74                    clearInterval(droppicsSriptImageloadedLoaded);
75                }
76            },100);    
77    })();
78
79    // Mobile swipe
80    jQuery(document).bind('cbox_open', function () {
81        $("#colorbox.droppics").swipe({
82            //Generic swipe handler for all directions
83            swipeLeft: function (event, direction, distance, duration, fingerCount) {
84                $.colorbox.next();
85            },
86            swipeRight: function (event, direction, distance, duration, fingerCount) {
87                $.colorbox.prev();
88            },
89            threshold: 75
90        });
91    });
92
93    const isMobile = window.matchMedia("only screen and (max-width: 600px)").matches;
94
95    // Fix gallery display issue inside a tab content.
96    $('.nav-tabs a').on('shown.bs.tab', function(event){
97        $(".droppicsgallerymasonry").each(function(){
98            var id = $(this).data('id');
99            var that = this;
100            $(that).imagesLoaded(function() {
101                if (isMobile) {
102                    $(that).find(".droppicspictures").css('float','left');
103                } else {
104                    $(that).find(".droppicspictures").masonry({
105                        itemSelector: ".wimg",
106                        isAnimated: true,
107                        animationOptions: {
108                            duration: 400
109                        },
110                        isFitWidth: true
111                    });
112                }
113
114            });
115        });
116    });
117
118    // Fix gallery display issue inside a Bootstrap accordion content.
119    $('.accordion').on('shown.bs.collapse',function (event) {
120        $(event.target).find(".droppicsgallerymasonry").each(function(){
121            var that = this;
122            $(that).imagesLoaded(function() {
123                if (isMobile) {
124                    $(that).find(".droppicspictures").css('float','left');
125                } else {
126                    $(that).find(".droppicspictures").masonry({
127                        itemSelector: ".wimg",
128                        isAnimated: true,
129                        animationOptions: {
130                            duration: 400
131                        },
132                        isFitWidth: true
133                    });
134                }
135            });
136        });
137
138        $(event.target).find('.droppicsgalleryheapshot').each(function(){
139            options = new Array();
140            that = $(this);
141            if(that.find('ul').data('overflowparents')==='1'){
142                options['overflowparents'] = true;
143            }else{
144                options['overflowparents'] = false;

145            }
146            options['rotation'] = 80;
147            that.find('ul').heapshot(options);
148        });
149    });
150
151    // Fix gallery display issue inside a tab content. Regular Labs - Tabs & Accordions
152    let tabPanels  = jQuery(".droppicsgallerymasonry").parents("div[data-rlta-element='panel-content']");
153    if (tabPanels.length > 0 ) {
154
155        const mutationObserver = new MutationObserver((mutations) => {
156
157            mutations.forEach(function(mutation) {
158
159                const visibility = window
160                    .getComputedStyle(mutation.target)
161                    .getPropertyValue('opacity')
162
163                console.log(visibility);
164                if (visibility === '1') {
165                    console.log('[MO]: element is visible')
166                    jQuery(mutation.target).find(".droppicsgallerymasonry").each(function () {
167                        var that = this;
168                        jQuery(that).imagesLoaded(function () {
169                            if (isMobile) {
170                                $(that).find(".droppicspictures").css('float','left');
171                            } else {
172                                $(that).find(".droppicspictures").masonry({
173                                    itemSelector: ".wimg",
174                                    isAnimated: true,
175                                    animationOptions: {
176                                        duration: 400
177                                    },
178                                    isFitWidth: true
179                                });
180                            }
181                        });
182                    });
183                }
184
185            });
186        })
187
188        tabPanels.each(function(idx,tabPanel){
189            // Respond to visibility changes that are handled via inline CSS
190            mutationObserver.observe(tabPanel, {
191                attributes: true,
192                attributeFilter: ['style']
193            })
194
195        })
196    }
197});
198// Fix gallery display issue inside a joomlashack tab content.
199// sort tab plugin run before droppics content plugin
200if(typeof(window.tabberOptions) !=='undefined') {
201    tabberOptions.onTabDisplay = function (argsObj) {
202        console.log('render Droppics masonry', argsObj);
203        jQuery(".droppicsgallerymasonry").each(function () {
204            var that = this;
205            jQuery(that).imagesLoaded(function () {
206                if (isMobile) {
207                    $(that).find(".droppicspictures").css('float','left');
208                } else {
209                    $(that).find(".droppicspictures").masonry({
210                        itemSelector: ".wimg",
211                        isAnimated: true,
212                        animationOptions: {
213                            duration: 400
214                        },
215                        isFitWidth: true
216                    });
217                }
218            });
219        });
220    };
221}