https://yapx.ru/assets/js/plugins/lightgallery/lg-thumbnail.min.js?1670670864

1(function() {
2
3    'use strict';
4
5    var defaults = {
6        thumbnail: true,
7
8        animateThumb: true,
9        currentPagerPosition: 'middle',
10
11        thumbWidth: 100,
12        thumbHeight: 80,
13        thumbContHeight: 100,
14        thumbMargin: 5,
15
16        exThumbImage: false,
17        showThumbByDefault: true,
18        toogleThumb: true,
19        pullCaptionUp: true,
20
21        enableThumbDrag: true,
22        enableThumbSwipe: true,
23        swipeThreshold: 50,
24
25        loadYoutubeThumbnail: true,
26        youtubeThumbSize: 1,
27
28        loadVimeoThumbnail: true,
29        vimeoThumbSize: 'thumbnail_small',
30
31        loadDailymotionThumbnail: true
32    };
33
34    var Thumbnail = function(element) {
35
36        // get lightGallery core plugin data
37        this.core = $(element).data('lightGallery');
38
39        // extend module default settings with lightGallery core settings
40        this.core.s = $.extend({}, defaults, this.core.s);
41
42        this.$el = $(element);
43        this.$thumbOuter = null;
44        this.thumbOuterWidth = 0;
45        this.thumbTotalHeight = 0;
46        this.thumbTotalWidth = (this.core.$items.length * (this.core.s.thumbWidth + this.core.s.thumbMargin));
47        this.thumbTotalHeight = (this.core.$items.length * (this.core.s.thumbHeight + this.core.s.thumbMargin))+15;
48        this.thumbIndex = this.core.index;
49
50        // Thumbnail animation value
51        this.left = 0;
52
53        this.init();
54
55        return this;
56    };
57
58    Thumbnail.prototype.init = function() {
59        var _this = this;
60        if (this.core.s.thumbnail && this.core.$items.length > 0) {
61            if (this.core.s.showThumbByDefault) {
62                setTimeout(function(){
63                    _this.core.$outer.addClass('lg-thumb-open');
64                }, 700);
65            }
66
67            if (this.core.s.pullCaptionUp) {
68                this.core.$outer.addClass('lg-pull-caption-up');
69            }
70
71            this.build();
72            if (this.core.s.animateThumb) {
73                if (this.core.s.enableThumbDrag && !this.core.isTouch && this.core.doCss()) {
74                    this.enableThumbDrag();
75                }
76
77                if (this.core.s.enableThumbSwipe && this.core.isTouch && this.core.doCss()) {
78                    this.enableThumbSwipe();
79                }
80
81                this.thumbClickable = false;
82            } else {
83                this.thumbClickable = true;
84            }
85
86            this.toogle();
87            this.thumbkeyPress();
88        }
89    };
90
91    Thumbnail.prototype.build = function() {
92        var _this = this;
93        var thumbList = '';
94        var vimeoErrorThumbSize = '';
95        var $thumb;
96        var html = '<div class="lg-thumb-outer">' +
97            '<div class="lg-thumb lg-group">' +
98            '</div>' +
99            '</div>';
100
101        switch (this.core.s.vimeoThumbSize) {
102            case 'thumbnail_large':
103                vimeoErrorThumbSize = '640';
104                break;
105            case 'thumbnail_medium':
106                vimeoErrorThumbSize = '200x150';
107                break;
108            case 'thumbnail_small':
109                vimeoErrorThumbSize = '100x75';
110        }
111
112        _this.core.$outer.addClass('lg-has-thumb');
113
114        _this.core.$outer.find('.lg').append(html);
115
116        _this.$thumbOuter = _this.core.$outer.find('.lg-thumb-outer');
117        _this.thumbOuterWidth = _this.$thumbOuter.width();
118        _this.thumbOuterHeight = _this.$thumbOuter.height();
119
120        if (_this.core.s.animateThumb) {
121            _this.core.$outer.find('.lg-thumb').css({
122                // height: _this.thumbTotalHeight + 'px',
123                position: 'relative'
124            });
125        }
126
127        if (this.core.s.animateThumb) {
128            _this.$thumbOuter.css('height', _this.core.s.thumbContHeight + 'px');
129        }
130
131        function getThumb(src, thumb, index) {
132            var isVideo = _this.core.isVideo(src, index) || {};
133            var thumbImg;
134            var vimeoId = '';
135
136            if (isVideo.youtube || isVideo.vimeo || isVideo.dailymotion) {
137                if (isVideo.youtube) {
138                    if (_this.core.s.loadYoutubeThumbnail) {
139                        thumbImg = '//img.youtube.com/vi/' + isVideo.youtube[1] + '/' + _this.core.s.youtubeThumbSize + '.jpg';
140                    } else {
141                        thumbImg = thumb;
142                    }
143                } else if (isVideo.vimeo) {
144                    if (_this.core.s.loadVimeoThumbnail) {
145                        thumbImg = '//i.vimeocdn.com/video/error_' + vimeoErrorThumbSize + '.jpg';
146                        vimeoId = isVideo.vimeo[1];
147                    } else {
148                        thumbImg = thumb;
149                    }
150                } else if (isVideo.dailymotion) {
151                    if (_this.core.s.loadDailymotionThumbnail) {
152                        thumbImg = '//www.dailymotion.com/thumbnail/video/' + isVideo.dailymotion[1];
153                    } else {
154                        thumbImg = thumb;
155                    }
156                }
157            } else {
158                thumbImg = thumb;
159            }
160
161            thumbList += '<div data-vimeo-id="' + vimeoId + '" class="lg-thumb-item" style="width:' + _this.core.s.thumbWidth + 'px; margin-right: ' + _this.core.s.thumbMargin + 'px"><img src="' + thumbImg + '" /></div>';
162            vimeoId = '';
163        }
164
165        if (_this.core.s.dynamic) {
166            for (var i = 0; i < _this.core.s.dynamicEl.length; i++) {
167                getThumb(_this.core.s.dynamicEl[i].src, _this.core.s.dynamicEl[i].thumb, i);
168            }
169        } else {
170            _this.core.$items.each(function(i) {
171
172                if (!_this.core.s.exThumbImage) {
173                    getThumb($(this).attr('href') || $(this).attr('data-src'), $(this).find('img').attr('src'), i);
174                } else {
175                    getThumb($(this).attr('href') || $(this).attr('data-src'), $(this).attr(_this.core.s.exThumbImage), i);
176                }
177
178            });
179        }
180
181        _this.core.$outer.find('.lg-thumb').html(thumbList);
182
183        $thumb = _this.core.$outer.find('.lg-thumb-item');
184
185        // Load vimeo thumbnails
186        $thumb.each(function() {
187            var $this = $(this);
188            var vimeoVideoId = $this.attr('data-vimeo-id');
189
190            if (vimeoVideoId) {
191                $.getJSON('//www.vimeo.com/api/v2/video/' + vimeoVideoId + '.json?callback=?', {
192                    format: 'json'
193                }, function(data) {
194                    $this.find('img').attr('src', data[0][_this.core.s.vimeoThumbSize]);
195                });
196            }
197        });
198
199        // manage active class for thumbnail
200        $thumb.eq(_this.core.index).addClass('active');
201        _this.core.$el.on('onBeforeSlide.lg.tm', function() {
202            $thumb.removeClass('active');
203            $thumb.eq(_this.core.index).addClass('active');
204        });
205
206        $thumb.on('click.lg touchend.lg', function() {
207            var _$this = $(this);
208            setTimeout(function() {
209
210                // In IE9 and bellow touch does not support
211                // Go to slide if browser does not support css transitions
212                if ((_this.thumbClickable && !_this.core.lgBusy) || !_this.core.doCss()) {
213                    _this.core.index = _$this.index();
214                    _this.core.slide(_this.core.index, false, true, false);
215                }
216            }, 50);
217        });
218
219        _this.core.$el.on('onBeforeSlide.lg.tm', function() {
220            _this.animateThumb(_this.core.index);
221        });
222
223        $(window).on('resize.lg.thumb orientationchange.lg.thumb', function() {
224            setTimeout(function() {
225                _this.animateThumb(_this.core.index);
226                _this.thumbOuterWidth = _this.$thumbOuter.width();
227            }, 200);
228        });
229
230    };
231
232    Thumbnail.prototype.setTranslate = function(value) {
233        // jQuery supports Automatic CSS prefixing since jQuery 1.8.0
234        this.core.$outer.find('.lg-thumb').css({
235            transform: 'translate3d(0px, -' + (value) + 'px, 0px)'
236        });
237    };
238
239    Thumbnail.prototype.animateThumb = function(index) {
240        var $thumb = this.core.$outer.find('.lg-thumb');
241        if (this.core.s.animateThumb) {
242            var position;
243            switch (this.core.s.currentPagerPosition) {
244                case 'left':
245                    position = 0;
246                    break;
247                case 'middle':
248                    position = (this.thumbOuterHeight / 2) - (this.core.s.thumbHeight / 2);
249                    break;
250                case 'right':
251                    position = this.thumbOuterHeight - this.core.s.thumbHeight;
252            }
253            this.left = ((this.core.s.thumbHeight + this.core.s.thumbMargin) * index - 1) - position;
254            if (this.left > (this.thumbTotalHeight - this.thumbOuterHeight)) {
255                this.left = this.thumbTotalHeight - this.thumbOuterHeight;
256            }
257
258            if (this.left < 0) {
259                this.left = 0;
260            }
261
262            if (this.core.lGalleryOn) {
263                if (!$thumb.hasClass('on')) {
264                    this.core.$outer.find('.lg-thumb').css('transition-duration', this.core.s.speed + 'ms');
265                }
266
267                if (!this.core.doCss()) {
268                    $thumb.animate({
269                        left: -this.left + 'px'
270                    }, this.core.s.speed);
271                }
272            } else {
273                if (!this.core.doCss()) {
274                    $thumb.css('left', -this.left + 'px');
275                }
276            }
277
278            this.setTranslate(this.left);
279
280        }
281    };
282
283    // Enable thumbnail dragging and swiping
284    Thumbnail.prototype.enableThumbDrag = function() {
285
286        var _this = this;
287        var startCoords = 0;
288        var endCoords = 0;
289        var isDraging = false;
290        var isMoved = false;
291        var tempLeft = 0;
292
293        _this.$thumbOuter.addClass('lg-grab');
294
295        _this.core.$outer.find('.lg-thumb').on('mousedown.lg.thumb', function(e) {
296            if (_this.thumbTotalHeight > _this.thumbOuterWidth) {
297                // execute only on .lg-object
298                e.preventDefault();
299                startCoords = e.pageY;
300                isDraging = true;
301
302                // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
303                _this.core.$outer.scrollLeft += 1;
304                _this.core.$outer.scrollLeft -= 1;
305
306                // *
307                _this.thumbClickable = false;
308                _this.$thumbOuter.removeClass('lg-grab').addClass('lg-grabbing');
309            }
310        });
311
312        $(window).on('mousemove.lg.thumb', function(e) {
313            if (isDraging) {
314                tempLeft = _this.left;
315                isMoved = true;
316                endCoords = e.pageY;
317
318                _this.$thumbOuter.addClass('lg-dragging');
319
320                tempLeft = tempLeft - (endCoords - startCoords);
321
322                if (tempLeft > (_this.thumbTotalHeight - _this.thumbOuterHeight)) {
323                    tempLeft = _this.thumbTotalHeight - _this.thumbOuterHeight;
324                }
325
326                if (tempLeft < 0) {
327                    tempLeft = 0;
328                }
329
330                // move current slide
331                _this.setTranslate(tempLeft);
332
333            }
334        });
335
336        $(window).on('mouseup.lg.thumb', function() {
337            if (isMoved) {
338                isMoved = false;
339                _this.$thumbOuter.removeClass('lg-dragging');
340
341                _this.left = tempLeft;
342
343                if (Math.abs(endCoords - startCoords) < _this.core.s.swipeThreshold) {
344                    _this.thumbClickable = true;
345                }
346
347            } else {
348                _this.thumbClickable = true;
349            }
350
351            if (isDraging) {
352                isDraging = false;
353                _this.$thumbOuter.removeClass('lg-grabbing').addClass('lg-grab');
354            }
355        });
356
357    };
358
359    Thumbnail.prototype.enableThumbSwipe = function() {
360        var _this = this;
361        var startCoords = 0;
362        var endCoords = 0;
363        var isMoved = false;
364        var tempLeft = 0;
365
366        _this.core.$outer.find('.lg-thumb').on('touchstart.lg', function(e) {
367            if (_this.thumbTotalHeight > _this.thumbOuterHeight) {
368                e.preventDefault();
369                startCoords = e.originalEvent.targetTouches[0].pageY;
370                _this.thumbClickable = false;
371            }
372        });
373
374        _this.core.$outer.find('.lg-thumb').on('touchmove.lg', function(e) {
375            if (_this.thumbTotalHeight > _this.thumbOuterHeight) {
376                e.preventDefault();
377                endCoords = e.originalEvent.targetTouches[0].pageY;
378                isMoved = true;
379
380                _this.$thumbOuter.addClass('lg-dragging');
381
382                tempLeft = _this.left;
383
384                tempLeft = tempLeft - (endCoords - startCoords);
385
386                if (tempLeft > (_this.thumbTotalHeight - _this.thumbOuterHeight)) {
387                    tempLeft = _this.thumbTotalHeight - _this.thumbOuterHeight;
388                }
389
390                if (tempLeft < 0) {
391                    tempLeft = 0;
392                }
393
394                // move current slide
395                _this.setTranslate(tempLeft);
396
397            }
398        });
399
400        _this.core.$outer.find('.lg-thumb').on('touchend.lg', function() {
401            if (_this.thumbTotalHeight > _this.thumbOuterHeight) {
402
403                if (isMoved) {
404                    isMoved = false;
405                    _this.$thumbOuter.removeClass('lg-dragging');
406                    if (Math.abs(endCoords - startCoords) < _this.core.s.swipeThreshold) {
407                        _this.thumbClickable = true;
408                    }
409
410                    _this.left = tempLeft;
411                } else {
412                    _this.thumbClickable = true;
413                }
414            } else {
415                _this.thumbClickable = true;
416            }
417        });
418
419    };
420
421    Thumbnail.prototype.toogle = function() {
422        var _this = this;
423        if (_this.core.s.toogleThumb) {
424            _this.core.$outer.addClass('lg-can-toggle');
425            _this.core.$outer.find('.lg-toolbar').prepend('<span class="lg-toogle-thumb lg-icon" title="Боковая панель"></span>');
426            _this.core.$outer.find('.lg-toogle-thumb').on('click.lg', function() {
427                _this.core.$outer.toggleClass('lg-thumb-open');
428            });
429        }
430    };
431
432    Thumbnail.prototype.thumbkeyPress = function() {
433        var _this = this;
434        $(window).on('keydown.lg.thumb', function(e) {
435            if (e.keyCode === 38) {
436                e.preventDefault();
437                _this.core.$outer.addClass('lg-thumb-open');
438            } else if (e.keyCode === 40) {
439                e.preventDefault();
440                _this.core.$outer.removeClass('lg-thumb-open');
441            }
442        });
443    };
444
445    Thumbnail.prototype.destroy = function() {
446        if (this.core.s.thumbnail && this.core.$items.length > 1) {
447            $(window).off('resize.lg.thumb orientationchange.lg.thumb keydown.lg.thumb');
448            this.$thumbOuter.remove();
449            this.core.$outer.removeClass('lg-has-thumb');
450        }
451    };
452
453    $.fn.lightGallery.modules.Thumbnail = Thumbnail;
454
455})();