https://moore.org/content/js/popup-gallery.js

1
2/* =================================
3 Popup Gallery
4 ==================================== */
5"use strict";
6$(document).ready(function () {
7    var isMobile = false;
8    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
9        isMobile = true;
10    }
11    /*==============================================================*/
12    //Lightbox gallery - START CODE
13    /*==============================================================*/
14    $('.lightbox-gallery').magnificPopup({
15        delegate: 'a',
16        type: 'image',
17        tLoading: 'Loading image #%curr%...',
18        mainClass: 'mfp-fade',
19        gallery: {
20            enabled: true,
21            navigateByImgClick: true,
22            preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
23        }
24    });
25    /*==============================================================*/
26    //Lightbox gallery - END CODE
27    /*==============================================================*/
28
29    /*==============================================================*/
30    //Ajax MagnificPopup For Onepage Portfolio - START CODE
31    /*==============================================================*/
32    $('.simple-ajax-popup-align-top').magnificPopup({
33        type: 'ajax',
34        alignTop: true,
35        overflowY: 'scroll', // as we know that popup content is tall we set scroll overflow by default to avoid jump
36        callbacks: {
37            open: function () {
38                $('.navbar .collapse').removeClass('in');
39                $('.navbar a.dropdown-toggle').addClass('collapsed');
40            }
41        }
42    });
43    /*==============================================================*/
44    //Ajax MagnificPopup For Onepage Portfolio - END CODE
45    /*==============================================================*/
46
47    /*==============================================================*/
48    //Video MagnificPopup - START CODE
49    /*==============================================================*/
50    $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
51        disableOn: 700,
52        type: 'iframe',
53        mainClass: 'mfp-fade',
54        removalDelay: 160,
55        preloader: false,
56        fixedContentPos: false,
57        callbacks: {
58            open: function () {
59                if (!isMobile)
60                    $('body').addClass('overflow-hidden');
61            },
62            close: function () {
63                if (!isMobile)
64                    $('body').removeClass('overflow-hidden');
65            }
66            // e.t.c.
67        }
68    });
69    /*==============================================================*/
70    //Video MagnificPopup - END CODE
71    /*==============================================================*/
72
73    /*==============================================================*/
74    // magnificPopup - START CODE
75    /*==============================================================*/
76    $('.popup-youtube-landing').magnificPopup({
77        disableOn: 700,
78        type: 'iframe',
79        mainClass: 'mfp-fade',
80        removalDelay: 160,
81        preloader: false,
82        // for black backgriund
83        blackbg: true,
84        fixedContentPos: false,
85        callbacks: {
86            open: function () {
87                if (!isMobile)
88                    $('body').addClass('overflow-hidden');
89            },
90            close: function () {
91                if (!isMobile)
92                    $('body').removeClass('overflow-hidden');
93            }
94            // e.t.c.
95        }
96    });
97    /*==============================================================*/
98    // magnificPopup - END CODE
99    /*==============================================================*/
100
101    /*==============================================================*/
102    //Single image lightbox - zoom animation - START CODE
103    /*==============================================================*/
104    $('.image-popup-no-margins').magnificPopup({
105        type: 'image',
106        closeOnContentClick: true,
107        fixedContentPos: true,
108        mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
109        image: {
110            verticalFit: true,
111        },
112        zoom: {
113            enabled: true,
114            duration: 300 // don't foget to change the duration also in CSS
115        }
116    });

117    /*==============================================================*/
118    //Single image lightbox - zoom animation - END CODE
119    /*==============================================================*/
120
121    /*==============================================================*/
122    //Single image -  fits horizontally and vertically - START CODE
123    /*==============================================================*/
124    $('.image-popup-vertical-fit').magnificPopup({
125        type: 'image',
126        closeOnContentClick: true,
127        mainClass: 'mfp-img-mobile',
128        image: {
129            verticalFit: true
130        }
131
132    });
133    /*==============================================================*/
134    //Single image -  fits horizontally and vertically - END CODE
135    /*==============================================================*/
136
137    /*==============================================================*/
138    //Zoom gallery - START CODE
139    /*==============================================================*/
140    $('.zoom-gallery').magnificPopup({
141        delegate: 'a',
142        type: 'image',
143        mainClass: 'mfp-with-zoom mfp-img-mobile',
144        image: {
145            verticalFit: true,
146            titleSrc: function (item) {
147                return item.el.attr('title') + ' &middot; <a class="image-source-link" href="' + item.el.attr('data-source') + '" target="_blank">image source</a>';
148            }
149        },
150        gallery: {
151            enabled: true
152        },
153        zoom: {
154            enabled: true,
155            duration: 300, // don't foget to change the duration also in CSS
156            opener: function (element) {
157                return element.find('img');
158            }
159        }
160
161    });
162    /*==============================================================*/
163    //Zoom gallery - END CODE
164    /*==============================================================*/
165
166    /*==============================================================*/
167    //Popup with form - START CODE
168    /*==============================================================*/
169    $('.popup-with-form').magnificPopup({
170        type: 'inline',
171        preloader: false,
172        closeBtnInside: true,
173        focus: '#name',
174        // When elemened is focused, some mobile browsers in some cases zoom in
175        // It looks not nice, so we disable it:
176        callbacks: {
177            beforeOpen: function () {
178                if ($(window).width() < 700) {
179                    this.st.focus = false;
180                } else {
181                    this.st.focus = '#name';
182                }
183            }
184        }
185    });
186    /*==============================================================*/
187    //Popup with form - END CODE
188    /*==============================================================*/
189
190    /*==============================================================*/
191    //Modal popup - START CODE
192    /*==============================================================*/
193    $('.modal-popup').magnificPopup({
194        type: 'inline',
195        preloader: false,
196        // modal: true,
197        blackbg: true
198    });
199    $(document).on('click', '.popup-modal-dismiss', function (e) {
200        e.preventDefault();
201        $.magnificPopup.close();
202    });
203    /*==============================================================*/
204    //Modal popup - END CODE
205    /*==============================================================*/
206
207    /*==============================================================*/
208    //Modal popup - zoom animation - START CODE
209    /*==============================================================*/
210    $('.popup-with-zoom-anim').magnificPopup({
211        type: 'inline',
212        fixedContentPos: false,
213        fixedBgPos: true,
214        overflowY: 'auto',
215        closeBtnInside: true,
216        preloader: false,
217        midClick: true,
218        removalDelay: 300,
219        blackbg: true,
220        mainClass: 'my-mfp-zoom-in'
221    });
222
223    $('.popup-with-move-anim').magnificPopup({
224        type: 'inline',

225        fixedContentPos: false,
226        fixedBgPos: true,
227        overflowY: 'auto',
228        closeBtnInside: true,
229        preloader: false,
230        midClick: true,
231        removalDelay: 300,
232        blackbg: true,
233        mainClass: 'my-mfp-slide-bottom'
234    });
235    /*==============================================================*/
236    //Modal popup - zoom animation - END CODE
237    /*==============================================================*/
238
239});