https://www.hotellastella.it/js2/vit-gallery.js

1
2
3/* eslint eqeqeq: 0 */
4/* eslint no-unused-vars: 0 */
5
6/* v4.0/w create fullscreen*/
7
8
9(function($){
10    "use strict";
11    $.fn.vitGallery = function( options) {
12        //Default settings
13        var settings = $.extend({
14            debag: false,
15            galleryHeight: 'auto',
16            imgBlockClass: 'gallery__img-block',
17            controls: 'thumbnails', // points thumbnails
18            controlsClass: 'gallery__controls',
19            thumnailWidth: 90,
20            thumnaiHeight: 60,
21            thumbnailMargin: 15,
22            thumbnailAnimation: true,
23            thumnailAnimationSpeed: 1000,
24            animateSpeed: 1000,
25            description: true,
26            imgPadding: 15,
27            autoplay: false,
28            autoplayDelay: 5000,
29            fullscreen: false,
30            transition: 'slide' // slide crossfade slide-blur
31
32        }, options);
33
34
35        //Default variables
36        var $this = $(this) // .gallery
37          , $galleryBlock // .gallery__block
38          , $imgBlock = $this.find('.'+ settings.imgBlockClass) // .gallery__img-block
39          , $controlsBlock = $this.find('.'+ settings.controlsClass) // .gallery__controls
40          , $prevButton // .gallery .prev
41          , $nextButton // .gallery .next
42          , $controlsItem // .gallery__controls__item
43          , $galleryInner // .gallery__inner
44          , $descriptionBlock // .gallery__description-block
45          , galleryInnerPosition // css left of gallery inner
46          , $currentBlock // .gallery__img-block.current
47          , currentBlockIndex // index of current block
48          , $galleryControlsUl
49          , $centerThumbnail
50          , $currentControlItem
51          , $galleryControlsInner
52          , controlsInnerPosition
53          , $fullscreenWrap
54          ;
55
56
57        //Classess
58        var _galleryInnerClass = 'gallery__inner'
59          , _galleryDescriptionClass = 'gallery__description-block'
60          , _thumbnailImgClass = 'gallery__thumbnail'
61          , _controlsClass = 'gallery__controls'
62          , _fullscreenWrapClass = 'gallery__fullscreen__wrap'
63          , _fullscreenButtonClass = 'gallery__fullscreen__bt'
64          , _fullscreenExitClass =  'gallery__fullscreen__exit'
65          ;
66
67        //Timer
68        var sliderTimer;
69
70        function updatevariables(functionName) {
71            //console.log(functionName);
72            $controlsBlock = $this.find('.' + settings.controlsClass);
73            $galleryBlock = $this.find('.gallery__block');
74            $prevButton = $this.find('.prev');
75            $nextButton = $this.find('.next');
76            $controlsItem = ( $this.find('.gallery__thumbnail').length > 0 ) ? $this.find('.gallery__thumbnail') : $this.find('.gallery__controls__item');
77            $galleryInner = $this.find('.gallery__inner');
78            $currentBlock = $galleryInner.find('.gallery__img-block.current');
79            $descriptionBlock = $imgBlock.find('.gallery__description-block__description');
80            currentBlockIndex = $currentBlock.index();
81        }
82
83        function updateSlideVariables() {
84            $currentBlock = $galleryInner.find('.gallery__img-block.current');
85            currentBlockIndex = $currentBlock.index();
86            $descriptionBlock = $imgBlock.find('.gallery__description-block__description');
87            $currentControlItem = $('.' + _controlsClass).find('.current');
88
89            if (settings.controls == 'thumbnails') {
90                controlsInnerPosition = parseInt($galleryControlsInner.css('left'));
91            }
92        }
93
94        function addClasses () {
95            $imgBlock.each(function(){
96                $(this).find('span').addClass('gallery__description-block__description');
97                $(this).find('img').addClass('gallery__img-block__img')
98            })
99            updatevariables();
100        }
101
102        function addWrapper() {
103            $imgBlock.wrapAll('<div class="gallery__block"><div class="' + _galleryInnerClass + '"></div></div>');
104            updatevariables();
105        }
106
107        function getFullWidth() {
108            var imgBlockWidth = 0;
109            if (settings.imgPadding && settings.imgPadding != 0) {
110                imgBlockWidth = ($imgBlock.length - 1) * settings.imgPadding;
111            }
112            $imgBlock.each(function(){
113                imgBlockWidth = imgBlockWidth + $(this).outerWidth();
114            })
115
116            updatevariables();
117            return imgBlockWidth;
118        }
119
120        function setInnerWidth() {
121            var inner = $this.find('.' + _galleryInnerClass);
122            inner.css('width', getFullWidth());
123
124            updatevariables();
125        }
126
127        function setImgBlockWidth() {
128            $imgBlock.css('width', $this.width());
129            updatevariables('setImgBlockWidth');
130        }
131
132        function setGalleryHeight() {
133
134            $imgBlock.each(function(){
135                var img = $(this).find('.gallery__img-block__img');
136                $(this).addClass('load');
137
138
139                img.bindImageLoad(function () { //Plugin for load image (look at the end of page)
140
141                    var img = $(this);
142                    setTimeout(function () {
143                        img.parent().removeClass('load');
144                        // обнуляем переменную, чтобы GC сделал свою работу
145                        img = null;
146                    }, 100);
147
148                });
149            })
150
151            updatevariables('setGalleryHeight');
152        }
153
154        function createControlsButton() {
155            var prev = '<span class="prev"></span>'
156              , next = '<span class="next"></span>'
157              , buttonBlock = '<div class="gallery__controls-buttons"></div>'
158              ;
159
160            var newItem = $galleryBlock.append($(buttonBlock));
161
162            newItem.find('.gallery__controls-buttons').append($(prev)).append($(next))
163        }
164
165        function createFullscreen() {
166            var $body = $('body')
167              , fullscreenButton = '<span class="' + _fullscreenButtonClass + '"></span>'
168              , fullscreenWrap = '<div class="' + _fullscreenWrapClass + ' ' + 'fullscreen_' + $this.attr('class') + '"></div>'
169              , fullscreenClose = '<span class="' + _fullscreenExitClass + '"></span>'
170              , fakeBlock = '<div class="gallery__fake"></div>'

171              , fullScreenControls = '<div class="gallery__fullscreen__controls"><span class="prev"></span><span class="next"></span></div>'
172              ;
173
174            $galleryBlock.append(fullscreenButton);
175
176            $this.append(fullscreenWrap);
177
178            $fullscreenWrap = $body.find('.fullscreen_' + $this.attr('class')).append(fullscreenClose);
179            $fullscreenWrap.append(fakeBlock);
180            $fullscreenWrap.append(fullScreenControls);
181
182            //$controlsBlock.clone().appendTo($fullscreenWrap);
183
184            var fullscreenThumbnailsBlock = $fullscreenWrap.find('.' + settings.controlsClass).addClass('fullscreen');
185        }
186
187        function openCurrentImage () {
188            var currentImageSrc = $currentBlock.find('img').attr('src');
189
190            $fullscreenWrap.append('<img src="' + currentImageSrc + '" class="gallery__fullscreen__img">');
191        }
192
193        function changeFullscreenImg(where, index) {
194            var $currentImage = $fullscreenWrap.find('.gallery__fullscreen__img');
195
196            switch (where) {
197                case 'next':
198                    var nextImgSrc = $currentBlock.next().find('img').attr('src');
199                    $currentImage.attr('src', nextImgSrc);
200                    break;
201
202                case 'prev':
203                    var prevImgSrc = $currentBlock.prev().find('img').attr('src');
204                    $currentImage.attr('src', prevImgSrc);
205                    break;
206
207                case 'goTo':
208                    var goToImgSrc = $('.gallery__img-block').eq(index).find('img').attr('src');
209                    $currentImage.attr('src', goToImgSrc);
210                    break;
211            }
212        }
213
214        function createControls() {
215            if (settings.controls) {
216                $controlsBlock = $this.find('.' + settings.controlsClass);
217
218                var item = '<li class="gallery__controls__item"></li>';
219
220                for (var i=0; $imgBlock.length > i; i++) {
221                    var newItem = $controlsBlock.append(item);
222
223                }
224
225                $('.gallery__controls__item').each(function(index){
226                    $(this).addClass('item_' + index)
227                })
228
229                $controlsBlock.append(newItem);
230                var galleryUl = $(newItem).find('li').wrapAll('<ul class="gallery__controls__ul"></ul>');
231
232            }
233
234            //getCurrentSlide();
235            updatevariables('createControls');
236        }
237
238        function createThumbnails() {
239            var controlInner = '<div class="gallery__controls__inner"></div>'
240              , controlsThumbnailul = '<div class="gallery__controls__thumbnails-ul"></div>'
241              , newItem
242              ;
243
244            if (settings.controls) {
245                $controlsBlock = $this.find('.' + settings.controlsClass);
246
247                var $galleryUl = $controlsBlock.append(controlsThumbnailul);
248                $galleryUl.find('.gallery__controls__thumbnails-ul').append(controlInner);
249                $galleryControlsUl = $galleryUl.find('.gallery__controls__thumbnails-ul');
250                $galleryControlsInner = $('.gallery__controls__inner');
251
252
253                $imgBlock.each(function() {
254                    var $thumnailImg = $(this).find('img');
255                    var thumnailImgUrl = $thumnailImg.attr('alt');
256
257                    newItem = document.createElement('img');
258                    newItem.src = thumnailImgUrl;
259                    $(newItem).css('width', '100%')
260                    $galleryControlsInner.append($(newItem));
261                })
262
263                $galleryControlsInner.find('img').wrap('<span class="'+_thumbnailImgClass+'"></span>');
264
265                $('.' + _thumbnailImgClass).width(settings.thumnailWidth)
266                                           .height(settings.thumnaiHeight)
267                                           .css('margin-right', settings.thumbnailMargin)
268                                           .attr('data-index', $(this).index())
269                                           .last().css('margin-right', 0)
270                                           ;
271                $('.' + _thumbnailImgClass).append('<i></i>')
272

273                $galleryControlsInner.css({
274                    width: ( $('.' + _thumbnailImgClass).outerWidth() + settings.thumbnailMargin ) * $('.' + _thumbnailImgClass).length - settings.thumbnailMargin,
275                    left: 0
276                });
277
278                updatevariables('createThumbnails');
279            }
280        }
281
282        function getCenterThumbnail() {
283            var containerWidth = $galleryControlsUl.outerWidth()
284              , $thumnail = $('.gallery__thumbnail')
285              , thumnailWidth = $thumnail.outerWidth()
286              , countThumbInCont = Math.round( containerWidth / thumnailWidth ) / 2
287              ;
288
289            countThumbInCont = Math.round(countThumbInCont)
290            $centerThumbnail = $thumnail.eq(countThumbInCont - 1);
291            $centerThumbnail.addClass('center');
292        }
293
294        function createDescription() {
295            $galleryBlock.append('<div class="' + _galleryDescriptionClass + '"></div>');
296
297            //console.log(currentBlockIndex);
298            $descriptionBlock.each(function() {
299                $('.' + _galleryDescriptionClass).append($(this));
300            })
301
302            $descriptionBlock.eq(currentBlockIndex).addClass('current');
303
304            updatevariables('createDescription');
305        }
306
307        function changeDescription(currentIndex, index) {
308            $descriptionBlock = $this.find('.gallery__description-block__description');
309            $descriptionBlock.eq(currentIndex).removeClass('current');
310            $descriptionBlock.eq(index).addClass('current');
311        }
312
313        function showImg() {
314            $imgBlock.each(function(index){
315                if (index != 0) {
316                    $(this).css('display', 'inline-block');
317                }
318            })
319            updatevariables('showImg');
320        }
321
322        function animateThumbnail (direction, currentIndex) {
323
324            switch (direction) {
325                case 'next':
326                    $controlsItem.eq(currentIndex)
327                        .find('i').css({left: 'auto', width: '100%'})
328                        .animate({width: 0}, settings.thumbnailAnimationSpeed, function() {
329                            $(this).css({left: '', width: ''});
330                        });
331
332                    $controlsItem.eq(currentIndex + 1)
333                        .find('i').css({right: 'auto', width: '0'})
334                        .animate({width: '100%'}, settings.thumbnailAnimationSpeed, function() {
335                            $(this).css({right: '', width: ''});
336                        });
337                    break;
338
339                case 'prev':
340                    $controlsItem.eq(currentIndex)
341                        .find('i').css({right: 'auto', width: '100%'})
342                        .animate({width: '0'}, settings.thumbnailAnimationSpeed, function() {
343                            $(this).css({right: '', width: ''});
344                        });
345                    $controlsItem.eq(currentIndex - 1)
346                        .find('i').css({left: 'auto', width: '0'})
347                        .animate({width: '100%'}, settings.thumbnailAnimationSpeed, function() {
348                            $(this).css({left: '', width: ''});
349                        });
350                    break;
351            }
352        }
353
354        function nextSlide(callback) {
355            if (!$currentBlock.is(':last-child')) {
356
357                if (settings.transition == 'slide'){
358                    $galleryInner.animate({
359                        left: galleryInnerPosition - $imgBlock.width()
360                    }, settings.animateSpeed);
361                    galleryInnerPosition = galleryInnerPosition - $imgBlock.width();
362                } else if (settings.transition == 'crossfade') {
363                    $currentBlock.animate({
364                        opacity: 0
365                    }, 150);
366
367                    $currentBlock.animate({
368                        opacity: 1
369                    }, 150);
370                } else if (settings.transition == 'slide-blur') {
371
372                    $galleryInner.animate({
373                        left: galleryInnerPosition - $imgBlock.width()
374                    }, settings.animateSpeed, function() {
375                        $imgBlock.removeClass('do-transition');
376                    });
377
378                    galleryInnerPosition = galleryInnerPosition - $imgBlock.width();
379
380                    $currentBlock.addClass('do-transition').next().addClass('do-transition');
381
382                    $currentBlock.animate({
383                        opacity: 1
384                    }, 150);
385                }
386
387                if (settings.fullscreen) {
388                    changeFullscreenImg('next')
389                }
390
391                $currentBlock.removeClass('current');
392                $currentBlock.next().addClass('current');
393                $controlsItem.eq(currentBlockIndex).removeClass('current');
394                $controlsItem.eq(currentBlockIndex + 1).addClass('current');
395
396                if (settings.thumbnailAnimation) {
397                    animateThumbnail ('next', currentBlockIndex);
398                }
399
400                if (settings.autoplay ) {
401                    clearInterval(sliderTimer);
402                    autoplay();
403                }
404
405                changeDescription(currentBlockIndex , currentBlockIndex + 1);
406                updateSlideVariables();
407                getCurrentSlide();
408
409                if (callback) {
410                    callback();
411                }
412
413                checkLastSlide(currentBlockIndex);
414            }
415            return currentBlockIndex;
416        }
417
418        function prevSlide(callback) {
419            if (!$currentBlock.is(':first-child')) {
420
421                if (settings.transition == 'slide'){
422                    $galleryInner.animate({
423                        left: galleryInnerPosition + $imgBlock.width()
424                    }, settings.animateSpeed);
425                    galleryInnerPosition = galleryInnerPosition + $imgBlock.width();
426                } else if (settings.transition == 'crossfade') {
427                    $currentBlock.animate({
428                        opacity: 0
429                    }, 150);
430
431                    $currentBlock.animate({
432                        opacity: 1
433                    }, 150);
434                } else if (settings.transition == 'slide-blur') {
435
436                    $galleryInner.animate({
437                        left: galleryInnerPosition + $imgBlock.width()
438                    }, settings.animateSpeed, function() {
439                        $imgBlock.removeClass('do-transition');
440                    });
441
442                    galleryInnerPosition = galleryInnerPosition + $imgBlock.width();
443
444                    $currentBlock.addClass('do-transition').prev().addClass('do-transition');
445
446                    $currentBlock.animate({
447                        opacity: 1
448                    }, 150);
449                }
450
451                if (settings.fullscreen) {
452                    changeFullscreenImg('prev')
453                }
454
455                $currentBlock.removeClass('current');
456                $currentBlock.prev().addClass('current');
457
458                $controlsItem.eq(currentBlockIndex).removeClass('current');
459                $controlsItem.eq(currentBlockIndex - 1).addClass('current');
460
461                if (settings.thumbnailAnimation) {
462                    animateThumbnail ('prev', currentBlockIndex);
463                }
464
465                if (settings.autoplay ) {
466                    clearInterval(sliderTimer);
467                    autoplay();
468                }
469
470                changeDescription(currentBlockIndex, currentBlockIndex - 1);
471                updateSlideVariables();
472                getCurrentSlide();
473
474                if (settings.controls == 'thumbnails'){

475                    var containerOffsetBegin = $galleryControlsUl.offset().left;
476                    var firstItemOffset = $controlsItem.first().offset().left;
477                }
478
479                if (callback) {
480                    callback();
481                }
482
483                checkLastSlide(currentBlockIndex);
484            }
485        }
486
487        function goToSlide(thisIndex) {
488            if (settings.transition == 'slide'){
489                if (currentBlockIndex < thisIndex) {
490                    $galleryInner.animate({
491                        left: galleryInnerPosition - ( $imgBlock.width() * ( thisIndex -  currentBlockIndex))
492                    }, settings.animateSpeed);
493
494                    galleryInnerPosition = galleryInnerPosition - ( $imgBlock.width() * ( thisIndex -  currentBlockIndex))
495
496                } else {
497                    $galleryInner.animate({
498                        left: - ( $imgBlock.width() * ( thisIndex +  currentBlockIndex) +  galleryInnerPosition)
499                    }, settings.animateSpeed);
500
501                    galleryInnerPosition = - ( $imgBlock.width() * ( thisIndex +  currentBlockIndex) +  galleryInnerPosition)
502                }
503            } else if (settings.transition == 'crossfade') {
504                $galleryInner.find('.current').animate({
505                    opacity: 0
506                }, 150);
507
508                $galleryInner.find('.current').animate({
509                    opacity: 1
510                }, 150);
511            } else if (settings.transition == 'slide-blur'){
512                if (currentBlockIndex < thisIndex) {
513                    $galleryInner.animate({
514                        left: galleryInnerPosition - ( $imgBlock.width() * ( thisIndex -  currentBlockIndex))
515                    }, settings.animateSpeed, function() {
516                        $imgBlock.removeClass('do-transition');
517                    });
518
519                    $imgBlock.addClass('do-transition');
520
521                    galleryInnerPosition = galleryInnerPosition - ( $imgBlock.width() * ( thisIndex -  currentBlockIndex))
522
523                } else {
524                    $galleryInner.animate({
525                        left: - ( $imgBlock.width() * ( thisIndex +  currentBlockIndex) +  galleryInnerPosition)
526                    }, settings.animateSpeed, function() {
527                        $imgBlock.removeClass('do-transition');
528                    });
529
530                    $imgBlock.addClass('do-transition');
531
532                    galleryInnerPosition = - ( $imgBlock.width() * ( thisIndex +  currentBlockIndex) +  galleryInnerPosition)
533                }
534            }
535
536            changeDescription($galleryInner.find('.current').index(), thisIndex);
537
538            $galleryInner.find('.current').removeClass('current');
539            $imgBlock.eq(thisIndex).addClass('current');
540
541            if (settings.thumbnailAnimation) {
542                $controlsBlock.find('.current').find('i').css({width: '', left: '', right: ''})
543
544                if (currentBlockIndex - thisIndex == -1) {
545                    animateThumbnail ('next', currentBlockIndex);
546                } else if (currentBlockIndex - thisIndex == 1) {
547                    animateThumbnail ('prev', currentBlockIndex);
548                }
549            }
550
551            $controlsBlock.find('.current').removeClass('current');
552
553
554            $controlsItem.eq(thisIndex).addClass('current');
555
556
557            getCurrentSlide();
558            updateSlideVariables();
559
560            if (settings.autoplay ) {
561                clearInterval(sliderTimer);
562                autoplay();
563            }
564
565            if (settings.fullscreen) {
566                changeFullscreenImg('goTo', $galleryInner.find('.current').index());
567            }
568
569            checkLastSlide(currentBlockIndex);
570        }
571
572        function checkLastSlide(index) {
573            var itemLength = $controlsItem.length;
574
575            if (index == $controlsItem.length - 1) {
576                $this.find('.next').addClass('hide');
577            } else {
578                $this.find('.next').removeClass('hide');
579            }
580            if (index == 0) {
581                $this.find('.prev').addClass('hide');
582            } else {
583                $this.find('.prev').removeClass('hide');
584            }
585        }
586

587        function scrollControls(direction) {
588
589            var controlsInnerPosition = parseInt($galleryControlsInner.css('left'));
590
591            if (direction == 'back') {
592                $galleryControlsInner.animate({
593                    left: controlsInnerPosition - ( $controlsItem.outerWidth() + settings.thumbnailMargin)
594                }, settings.animateSpeed)
595            } else if (direction == 'forward') {
596                $galleryControlsInner.animate({
597                    left: controlsInnerPosition + ( $controlsItem.outerWidth() + settings.thumbnailMargin)
598                }, settings.animateSpeed)
599            }
600
601            updateSlideVariables();
602        }
603
604        function autoplay() {
605            var countSlides = $imgBlock.length;
606            //console.log('autoplay');
607            sliderTimer = setInterval(function() {
608
609                if ( (currentBlockIndex + 1) / countSlides  == 1  ) {
610                    clearInterval(sliderTimer);
611
612                    setTimeout(function() {
613                        goToSlide(0)
614                    }, settings.autoplayDelay / 2);
615                }
616
617                nextSlide();
618
619            }, settings.autoplayDelay);
620
621        }
622
623        function bindEvents() {
624            galleryInnerPosition = parseInt($galleryInner.css('left'));
625            currentBlockIndex = $currentBlock.index();
626            var clickCount = 0;
627
628            $prevButton.on('click', function(){
629                if (!$(this).hasClass('hide')){
630                    clickCount++;
631                    $currentBlock = $galleryInner.find('.gallery__img-block.current');
632                    prevSlide();
633                }
634            })
635
636            $nextButton.on('click', function(){
637                if (!$(this).hasClass('hide')){
638                    $currentBlock = $galleryInner.find('.gallery__img-block.current');
639                    nextSlide();
640                }
641            })
642
643
644            $controlsItem.on('click', function() {
645                goToSlide($(this).index());
646
647            })
648
649            if (settings.fullscreen) {
650                var $fullscreenButton = $this.find('.' + _fullscreenButtonClass)
651                  , $fullscreenExitButton = $('.fullscreen_' + $this.attr('class')).find('.' + _fullscreenExitClass)
652                  ;
653
654                $fullscreenButton.on('click', function() {
655                    $fullscreenWrap.addClass('open');
656                    $controlsBlock.appendTo($fullscreenWrap);
657                    if (settings.controls == 'thumbnails') {
658                        $('.gallery__thumbnail.center').removeClass('center');
659                        getCenterThumbnail();
660                    }
661                    openCurrentImage();
662
663                })
664
665                $fullscreenExitButton.on('click', function() {
666                    $fullscreenWrap.removeClass('open');
667                    $controlsBlock.appendTo($this);
668                    if (settings.controls == 'thumbnails') {
669                        $('.gallery__thumbnail.center').removeClass('center');
670                        getCenterThumbnail();
671                    }
672                    getCurrentSlide();
673
674                    $fullscreenWrap.find('.gallery__fullscreen__img').remove();
675                })
676            }
677
678            if (settings.controls == 'thumbnails'){
679                $galleryControlsInner.on('mousedown', function( e ) {
680                    var clickPosition = e.pageX
681                      , startPosition = $galleryControlsInner.css('left')
682                      , offsetLeft = $(this).offset().left
683                      , offsetRight = $(this).offset().left + $(this).outerWidth()
684                      , oldX
685                      , newX
686                      ;
687
688                    $(window).on('mousemove', function(e) {
689
690                        var delta = clickPosition - e.pageX;
691                        var oldX = e.pageX;
692
693                        (function() {
694                            setTimeout(function() {
695                                newX = e.pageX
696                            }, 50)
697                        })()
698
699                        if (oldX > newX ) {

700                            $galleryControlsInner.css('left', parseInt(startPosition) - delta);
701                        }
702
703                        if (oldX < newX){
704                            $galleryControlsInner.css('left', parseInt(startPosition) - delta);
705                        }
706
707                        e.preventDefault();
708                    }).on('mouseup', function(e) {
709
710                        e.preventDefault();
711
712                        if ($galleryControlsInner.offset().left >= $galleryControlsInner.parent().offset().left) {
713                            $galleryControlsInner.addClass('go-back').css('left', 0)
714                            setTimeout(function() {
715                                $galleryControlsInner.removeClass('go-back')
716                            },300)
717                        }
718
719                        if ($galleryControlsInner.offset().left + $galleryControlsInner.outerWidth()  <= $galleryControlsInner.parent().offset().left + $galleryControlsInner.parent().outerWidth()) {
720                            $galleryControlsInner.addClass('go-back').css('left', $galleryControlsInner.parent().outerWidth() - $galleryControlsInner.outerWidth())
721                            setTimeout(function() {
722                                $galleryControlsInner.removeClass('go-back')
723                            },300)
724                        }
725                        $(this).unbind('mousemove');
726                    })
727                    e.preventDefault();
728                })
729            }
730
731            $(window).on('resize', function() {
732                if (settings.autoplay ) {
733                    clearInterval(sliderTimer);
734                }
735                setGalleryHeight();
736                setImgBlockWidth();
737                setInnerWidth();
738                updateSlideVariables();
739
740                $galleryInner.css('left', - (currentBlockIndex * $currentBlock.width()));
741                galleryInnerPosition = - (currentBlockIndex * $currentBlock.width())
742                if (settings.autoplay ) {
743                    autoplay();
744                }
745            })
746        }
747
748        function getCurrentSlide() {
749            var index = 0;
750
751            if ($this.find('.current').length > 0) {
752                index = $this.find('.current').index();
753
754
755                if (settings.controls == 'thumbnails'){
756                    var curentItemOffset = $controlsItem.eq(index).offset().left + (($controlsItem.outerWidth() + settings.thumbnailMargin) / 2)
757                      , centerItemOffset = $centerThumbnail.offset().left + (($controlsItem.outerWidth() + settings.thumbnailMargin) / 2)
758                      ;
759
760                    if ($controlsItem.eq(index).index() > $centerThumbnail.index() - 1 && $controlsItem.eq(index).index() <= $controlsItem.length - $centerThumbnail.index() - 2) {
761                        $galleryControlsInner.animate({
762                            left: -(curentItemOffset - centerItemOffset)
763                        }, 300)
764
765                    }
766                }
767
768                $controlsItem.eq(index).addClass('current');
769                $galleryInner.css('left', - (index * $imgBlock.width()));
770
771
772
773            } else {
774                $imgBlock.first().addClass('current');
775                $controlsItem.first().addClass('current');
776            }
777
778            updatevariables('getCurrentSlide');
779            updateSlideVariables();
780
781            return index;
782        }
783
784        function init() {
785            addClasses();
786            addWrapper();
787            createControlsButton();
788
789            setGalleryHeight();
790            setImgBlockWidth();
791            setInnerWidth();
792            showImg();
793
794
795            if (settings.controls == 'points'){
796                createControls();
797            } else if (settings.controls == 'thumbnails') {
798                createThumbnails();
799                getCenterThumbnail();
800            }
801
802            if (settings.fullscreen) {
803                createFullscreen();
804            }
805
806            getCurrentSlide();
807
808            if (settings.description) {
809                createDescription();
810            }
811
812            bindEvents();
813
814            if (settings.autoplay ) {
815                autoplay();
816            }
817        }
818
819        init();
820
821    }
822})(jQuery);
823(function ($) {
824    "use strict";
825    $.fn.bindImageLoad = function (callback) {
826        function isImageLoaded(img) {
827            if (!img.complete) {
828                return false;

829            }
830            if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
831                return false;
832            }
833            return true;
834        }
835
836        return this.each(function () {
837            var ele = $(this);
838            if (ele.is("img") && $.isFunction(callback)) {
839                ele.one("load", callback);
840                if (isImageLoaded(this)) {
841                    ele.trigger("load");
842                }
843            }
844        });
845    };
846})(jQuery);