https://www.shoppingwels.at/site/templates/assets/simplelightbox/simpleLightbox.js

1;(function($) {
2
3    'use strict';
4
5    var instanceNum = 0,
6        $html = $('html'),
7        $document = $(document),
8        $window = $(window);
9
10    function SimpleLightbox(options) {
11
12        this.options = $.extend({}, SimpleLightbox.defaults, options);
13        this.ens = '.slb' + (++instanceNum);
14        this.init();
15
16    }
17
18    SimpleLightbox.defaults = {
19
20        // add custom classes to lightbox elements
21        elementClass: '',
22        htmlClass: 'slbActive',
23        closeBtnClass: '',
24        nextBtnClass: '',
25        prevBtnClass: '',
26        loadingClass: '',
27
28        // customize / localize controls captions
29        closeBtnCaption: 'Close',
30        nextBtnCaption: 'Vor',
31        prevBtnCaption: 'Zurück',
32        loadingCaption: 'Laden...',
33
34        bindToItems: true, // set click event handler to trigger lightbox on provided $items
35        closeOnOverlayClick: true,
36        closeOnEscapeKey: true,
37        nextOnImageClick: false,
38        showCaptions: true,
39
40        captionAttribute: 'title', // choose data source for library to glean image caption from
41        urlAttribute: 'href', // where to expect large image
42
43        startAt: 0, // start gallery at custom index
44        loadingTimeout: 100, // time after loading element will appear
45
46        appendTarget: 'body', // append elsewhere if needed
47
48        beforeSetContent: null, // convenient hooks for extending library behavoiur
49        beforeClose: null,
50        beforeDestroy: null,
51
52        videoRegex: new RegExp(/youtube.com|vimeo.com/) // regex which tests load url for iframe content
53
54    };
55
56    $.extend(SimpleLightbox.prototype, {
57
58        init: function() {
59
60            this.items = [];
61            this.captions = [];
62
63            var self = this;
64
65            if (this.options.$items) {
66
67                this.$items = this.options.$items;
68
69                this.$items.each(function() {
70
71                    var $item = $(this);
72
73                    self.items.push($item.attr(self.options.urlAttribute));
74                    self.captions.push($item.attr(self.options.captionAttribute));
75
76                });
77
78                this.options.bindToItems && this.$items.on('click' + this.ens, function(e) {
79
80                    e.preventDefault();
81                    self.showPosition(self.$items.index($(e.currentTarget)));
82
83                });
84
85            } else if (this.options.items) {
86
87                this.items = this.options.items;
88
89            }
90
91            if (this.options.captions) {
92                this.captions = this.options.captions;
93            }
94
95        },
96
97        next: function() {
98
99            return this.showPosition(this.currentPosition + 1);
100
101        },
102
103        prev: function() {
104
105            return this.showPosition(this.currentPosition - 1);
106
107        },
108
109        normalizePosition: function(position) {
110
111            if (position >= this.items.length) {
112                position = 0;
113            } else if (position < 0) {
114                position = this.items.length - 1;
115            }
116
117            return position;
118
119        },
120
121        showPosition: function(position) {
122
123            var self = this;
124
125            this.currentPosition = this.normalizePosition(position);
126
127            return this.setupLightboxHtml().prepareItem(this.currentPosition, this.setContent).show();
128
129        },
130
131        prepareItem: function(position, callback) {
132
133            var self = this,
134                url = this.items[position];
135
136            this.loadingTimeout = setTimeout(function() {
137
138                self.setContent('<p class="slbLoading ' + self.options.loadingClass + '">' + self.options.loadingCaption + '</p>').show();
139
140            }, this.options.loadingTimeout);
141
142            if (this.options.videoRegex.test(url)) {
143
144                callback.call(self, $('<div data-name="youtube" class="slbIframeCont"><iframe data-name="youtube" class="slbIframe" frameborder="0" allowfullscreen data-src="' + url + '?rel=0"></iframe></div>'));
145
146            } else {
147
148                var $imageCont = $('<div class="slbImageWrap"><img class="slbImage" src="' + url + '" /></div>');
149
150                this.$currentImage = $imageCont.find('.slbImage');
151
152                if (this.options.showCaptions && this.captions[position]) {
153                    $imageCont.append('<div class="slbCaption">' + this.captions[position] + '</div>');
154                }
155
156                this.loadImage(url, function() {
157
158                    self.setImageDimensions();
159
160                    callback.call(self, $imageCont);
161
162                    self.loadImage(self.items[self.normalizePosition(self.currentPosition + 1)]);
163
164                });
165
166            }
167
168            return this;
169
170        },
171
172        loadImage: function(url, callback) {
173
174            if (!this.options.videoRegex.test(url)) {
175
176                var image = new Image();
177                callback && (image.onload = callback);
178                image.src = url;
179
180            }
181
182        },
183
184        setupLightboxHtml: function() {
185
186            var o = this.options;
187
188            if (!this.$el) {
189
190                this.$el = $(
191                    '<div class="slbElement ' + o.elementClass + '">' +
192                        '<div class="slbOverlay"></div>' +
193                        '<div class="slbWrapOuter">' +
194                            '<div class="slbWrap">' +
195                                '<div class="slbContentOuter">' +
196                                    '<div class="slbContent"></div>' +
197                                    '<button type="button" title="' + o.closeBtnCaption + '" class="slbCloseBtn ' + o.closeBtnClass + '">×</button>' +
198                                '</div>' +
199                            '</div>' +
200                        '</div>' +
201                    '</div>'
202                );
203
204                if (this.items.length > 1) {
205
206                    $(
207                        '<div class="slbArrows">' +
208                            '<button type="button" title="' + o.prevBtnCaption + '" class="prev slbArrow' + o.prevBtnClass + '">' + o.prevBtnCaption + '</button>' +
209                            '<button type="button" title="' + o.nextBtnCaption + '" class="next slbArrow' + o.nextBtnClass + '">' + o.nextBtnCaption + '</button>' +
210                        '</div>'
211                    ).appendTo(this.$el.find('.slbContentOuter'));
212
213                }
214
215                this.$content = this.$el.find('.slbContent');
216
217            }
218
219            return this;
220
221        },
222
223        show: function() {
224
225            if (!this.modalInDom) {
226
227                this.$el.appendTo($(this.options.appendTarget));
228                $html.addClass(this.options.htmlClass);
229                this.setupLightboxEvents();
230
231                this.modalInDom = true;
232
233            }
234
235            return this;
236
237        },
238
239        setContent: function(content) {
240
241            var $content = $(content);
242
243            clearTimeout(this.loadingTimeout);
244
245            this.setupLightboxHtml();
246            this.options.beforeSetContent && this.options.beforeSetContent($content, this);
247            this.$content.html($content);
248
249            return this;
250
251        },
252
253        setImageDimensions: function() {
254
255            this.$currentImage && this.$currentImage.css('max-height', $window.height() + 'px');
256
257        },
258
259        setupLightboxEvents: function() {
260
261            var self = this;
262
263            if (!this.lightboxEventsSetuped) {
264

265                this.$el.on('click' + this.ens, function(e) {
266
267                    var $target = $(e.target);
268
269                    if ($target.is('.slbCloseBtn') || (self.options.closeOnOverlayClick && $target.is('.slbWrap'))) {
270
271                        self.close();
272
273                    } else if ($target.is('.slbArrow')) {
274
275                        $target.hasClass('next') ? self.next() : self.prev();
276
277                    } else if (self.options.nextOnImageClick && self.items.length > 1 && $target.is('.slbImage')) {
278
279                        self.next();
280
281                    }
282
283                });
284
285                $document.on('keyup' + this.ens, function(e) {
286
287                    self.options.closeOnEscapeKey && e.keyCode === 27 && self.close();
288
289                    if (self.items.length > 1) {
290                        (e.keyCode === 39 || e.keyCode === 68) && self.next();
291                        (e.keyCode === 37 || e.keyCode === 65) && self.prev();
292                    }
293
294                });
295
296                $window.on('resize' + this.ens, function() {
297
298                    self.setImageDimensions();
299
300                });
301
302                this.lightboxEventsSetuped = true;
303
304            }
305
306        },
307
308        close: function() {
309
310            if (this.modalInDom) {
311
312                this.options.beforeClose && this.options.beforeClose(this);
313
314                this.$el && this.$el.off(this.ens);
315                $document.off(this.ens);
316                $window.off(this.ens);
317                this.lightboxEventsSetuped = false;
318
319                this.$el.detach();
320                $html.removeClass(this.options.htmlClass);
321                this.modalInDom = false;

322            }
323
324        },
325
326        destroy: function() {
327
328            this.close();
329            this.options.beforeDestroy && this.options.beforeDestroy(this);
330            this.$items && this.$items.off(this.ens);
331            this.$el && this.$el.remove();
332
333        }
334
335    });
336
337    SimpleLightbox.open = function(options) {
338
339        var instance = new SimpleLightbox(options);
340
341        return options.content ? instance.setContent(options.content).show() : instance.showPosition(instance.options.startAt);
342
343    };
344
345    $.fn.simpleLightbox = function(options) {
346
347        var lightboxInstance,
348            $items = this;
349
350        return this.each(function() {
351            if (!$.data(this, 'simpleLightbox')) {
352                lightboxInstance = lightboxInstance || new SimpleLightbox($.extend({}, options, {$items: $items}));
353                $.data(this, 'simpleLightbox', lightboxInstance);
354            }
355        });
356
357    };
358
359    $.simpleLightbox = SimpleLightbox;
360
361})(window.jQuery || window.Zepto || window.simpleQuery);