https://www.lomado.de/templates/Snackys/js/snackys/jtl.gallery.js?v=271563

1(function () {
2    'use strict';
3
4    var GalleryClass = function (element, options) {
5        this.init(element, options);
6    };
7        
8    GalleryClass.DEFAULTS = {
9        items: [],
10        size: 'md',
11        hasWebP: false,
12        fullscreen: false,
13        template: {
14            inline: '<div class="image-gallery has-thumbs">' +
15            '<ul class="image-container carousel vertical slide"></ul>' +
16                '<div class="thumbs">' +
17                    '<button name="btnGalleryPre" type="button" class="btnGalleryPre slick-up"></button>' +
18                    '<div class="thumbs-box">' +
19                        '<ul class="image-thumbs carousel vertical"></ul>' +
20                    '</div>' +
21                    '<button  name="btnGalleryNext" type="button" class="btnGalleryNext slick-down"></button>' +
22                '</div>' +
23            '</div>',
24            fullscreen: '<div class="fullscreen image-gallery has-thumbs">' +
25            '<ul class="image-container box-expanded"></ul>' +
26            '<ul class="image-thumbs carousel vertical"></ul>' +
27            '</div>',
28            indicator: '<div class="pswp-indicator nivo-controlNav carousel-indicators bottom17"></div>'
29        }
30    };
31
32    GalleryClass.prototype = {
33        constructor: GalleryClass,
34        element: null,
35        ident: '_',
36        index: 0,
37        stack: [],
38
39        init: function(element, options) {
40            var items = [];
41			
42            this.stack   = [];
43            this.index   = 0;
44            this.element = element;
45            this.options =
46                $.extend({}, GalleryClass.DEFAULTS, options);
47
48
49            if (this.options.items.length > 0) {
50                items = this.options.items;
51            } else {
52                $(this.element).find('img').each(function (i, item) {
53                    var image = $(item).data('list');
54                    items.push(image);
55                });
56            }
57			$(document).trigger('evo:galleryClass.init', this);
58
59            this.setItems(items);
60            this.adjust();  //render at pageload not needed!!
61        },
62        
63        getIdent: function() {
64            return this.ident;
65        },
66
67        setItems: function(items, scope) {
68            var self = this;
69            this.ident = scope || this.ident;
70            this.clearStack();
71            $(items).each(function (i, item) {
72                self.getStack().push(item);
73            });
74        },
75		
76		lightbox: function(idx){
77			if($('body').hasClass('lightbox-shown'))
78			{
79				this.render();
80				$('body').removeClass('lightbox-shown');
81			} else {
82				this.render(false,true);
83				$('body').addClass('lightbox-shown');
84			}
85			if(idx)
86				this.activate(idx);
87		},
88		
89        render: function(scope,big) {
90			var self = this,
91				container, image, i, item;
92				
93            this.ident = scope || this.ident;
94			console.log(self.getStack());
95			
96			//Show different imagestack!			
97            $(this.element).empty();

98			container = $('<div />').addClass('inner');
99            for (i = 0; i < self.getStack().length; i++) {
100                item = self.getStack()[i];
101				image = $('<a />').attr('href',item.lg.src);
102				if(i==0) image.addClass('active');
103				image.append(
104					$('<div />').addClass("img-ct").append(
105						$('<img />').attr('src', (big) ? item.lg.src : item.md.src).attr('alt', item.md.alt).attr('data-big',item.lg.src)
106					)
107                );
108				container.append(image)
109			}
110			
111			if(self.getStack().length > 1 && $('body').hasClass('mobile'))
112				$(this.element).append(
113					$('<div />').attr('id',"gallery-prev").addClass("sl-ar sl-pr").append(
114						$('<div />').addClass("ar ar-l")
115					)
116				);
117			$(this.element).append(container);
118			if(self.getStack().length > 1 && $('body').hasClass('mobile'))
119				$(this.element).append(
120					$('<div />').attr('id',"gallery-next").addClass("sl-ar sl-nx").append(
121						$('<div />').addClass("ar ar-r")
122					)
123				);
124			
125			
126			if(self.getStack().length > 1 && !$('body').hasClass('mobile') && $('#gallery-thumbs').length > 0)
127			{
128				var thumb;
129				$('#gallery-thumbs').empty();
130				for (i = 0; i < self.getStack().length; i++) {
131					item = self.getStack()[i];
132					thumb = $('<div />').addClass('img-w');
133					if(i==0) thumb.addClass('active');
134					thumb.append(
135						$('<div />').addClass('img-ct').append(
136							$('<img />').attr('src', item.sm.src).attr('alt', item.sm.alt)
137						)
138					);
139					$(document).trigger('evo:galleryClass.renderThumb', thumb);
140					$('#gallery-thumbs').append(thumb);
141					image = $('<a />').attr('href',item.lg.src).append(
142						$('<div />').addClass("img-ct").append(
143							$('<img />').attr('src', item.md.src).attr('alt', item.md.alt)
144						)
145					);
146					//container.append(image)
147				}
148				
149			}
150			 $(document).trigger('evo:galleryClass.render', this);
151			
152			self.adjust();
153        },
154
155        scrollTo: function(step) {
156			self.activate(step);
157        },
158        
159        showThumbs: function(show) {
160        },
161		zoom: function(e){
162		},
163
164        hasWebP: function()
165        {
166            if(this.hasWebP)
167                return true;
168
169            //Now check and save result!
170            this.hasWebP = new Promise(res => {
171                const webP = new Image();
172                webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
173                webP.onload = webP.onerror = () => {
174                    res(webP.height === 2);
175                };
176            });
177
178            return this.hasWebP;
179        },
180        adjust: function() {
181			var self = this,
182				i = 0;
183				
184			$('#gallery-prev,#gallery-next,#gallery-thumbs>div,#gallery').unbind();
185			$('#gallery-prev').on('click',function(){self.prev()});
186			$('#gallery-next').on('click',function(){self.next()});
187			$('#gallery-thumbs>div').each(function()
188			{
189				$(this).on('click',function(){
190					self.activate($(this).index('#gallery-thumbs>div'));
191				});
192				i++;
193			});
194			
195				
196			if(!$('body').hasClass('mobile') || $('body').hasClass('tablet'))
197			{
198                var self  = this;
199				//mouseover des hauptbildes
200				if($('#gallery').hasClass('zoom'))
201					$('#gallery a').each(function(){
202						var that = this;
203						$(that).zoom({
204							url: ($(that).find('img').attr('data-big-webp') && self.hasWebP()) ? $(that).find('img').attr('data-big-webp') : $(that).find('img').attr('data-big'),
205							touch: false
206						});
207					});
208				$('#gallery a').on('click',function(e){e.preventDefault(); e.stopPropagation(); self.lightbox(self.index)});
209			}
210			else
211			{
212				$('#gallery a').on('click',function(e){e.preventDefault(); e.stopPropagation();});
213				swiper.init(document.getElementById('gallery'),function(e){
214					if(e && e.direction)
215					{
216						if(e.direction == "right")
217							self.prev();
218						else if(e.direction == "left")
219							self.next();
220					}
221				});
222			}
223			
224			
225			$('#close-lightbox').on('click',function(){$('body').removeClass('lightbox-shown');});
226			
227        },
228        
229        calcHeights: function() {
230        },
231

232        setMaxHeight: function(height, thumb_height) {
233        },
234
235        resetMaxHeight: function () {
236        },
237
238        itemCount: function() {
239            return this.getStack().length;
240        },
241
242        clearStack: function(scope) {
243            var s = scope || this.ident;
244            if (typeof this.stack[s] !== 'undefined') {
245                this.stack[s] = [];
246            }
247        },
248
249        getStack: function(scope) {
250            var s = scope || this.ident;
251            if (typeof this.stack[s] === 'undefined') {
252                this.stack[s] = [];
253            }
254            return this.stack[s];
255        },
256
257        getStacks: function() {
258            return this.stack;
259        },
260
261        activate: function(index) {
262            $(this.element).find('.inner>a').each(function (index, item) {
263                $(item).removeClass('active');
264            });
265
266            $(this.element).find('.inner>a:eq(' + index + ')')
267                .addClass('active');
268
269			if($('#gallery-thumbs').length > 0)
270			{
271				$('#gallery-thumbs>div').removeClass('active');
272				$('#gallery-thumbs>div:eq(' + index + ')').addClass('active');
273			}
274            this.index = index;
275        },
276
277        next: function() {
278            var idx = (this.index + 1) >= this.itemCount() ? 0 : this.index + 1;
279            this.activate(idx);
280        },
281
282        prev: function() {
283            var idx = (this.index - 1) < 0 ? this.itemCount() - 1 : this.index - 1;
284            this.activate(idx);
285        }
286    };
287
288    // PLUGIN DEFINITION
289    // =================
290
291    $.fn.gallery = function(option) {
292        if (this.length === 0) {
293            return this;
294        } else if (this.length > 1) {
295            this.each(function () {
296                $(this).gallery(option);
297            });
298            return this;
299        }
300
301        return new GalleryClass(this, option);
302    };
303
304})(jQuery);