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

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

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

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

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

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

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