https://www.sellersprite.com/assets-frontend/js/components/hs.fancybox.js

1/**
2 * Fancybox wrapper.
3 *
4 * @author Htmlstream
5 * @version 1.0
6 * @requires
7 *
8 */
9;
10(function ($) {
11  'use strict';
12
13  $.HSCore.components.HSFancyBox = {
14    /**
15     *
16     *
17     * @var Object _baseConfig
18     */
19    _baseConfig: {
20      parentEl: 'html',
21      baseClass: 'u-fancybox-theme',
22      slideClass: 'u-fancybox-slide',
23      speed: 1000,
24      slideSpeedCoefficient: 1,
25      infobar: false,
26      fullScreen: true,
27      thumbs: true,
28      closeBtn: true,
29      baseTpl: '<div class="fancybox-container" role="dialog" tabindex="-1">' +
30      '<div class="fancybox-content">' +
31      '<div class="fancybox-bg"></div>' +
32      '<div class="fancybox-controls" style="position: relative; z-index: 99999;">' +
33      '<div class="fancybox-infobar">' +
34      '<div class="fancybox-infobar__body">' +
35      '<span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span>' +
36      '</div>' +
37      '</div>' +
38      '<div class="fancybox-toolbar">{{BUTTONS}}</div>' +
39      '</div>' +
40      '<div class="fancybox-slider-wrap">' +
41      '<button data-fancybox-prev class="fancybox-arrow fancybox-arrow--left" title="Previous"></button>' +
42      '<button data-fancybox-next class="fancybox-arrow fancybox-arrow--right" title="Next"></button>' +
43      '<div class="fancybox-stage"></div>' +
44      '</div>' +
45      '<div class="fancybox-caption-wrap">' +
46      '<div class="fancybox-caption"></div>' +
47      '</div>' +
48      '</div>' +
49      '</div>',
50      animationEffect: 'fade'
51    },
52
53    /**
54     *
55     *
56     * @var jQuery pageCollection
57     */
58    pageCollection: $(),
59
60    /**
61     * Initialization of Fancybox wrapper.
62     *
63     * @param String selector (optional)
64     * @param Object config (optional)
65     *
66     * @return jQuery pageCollection - collection of initialized items.
67     */
68
69    init: function (selector, config) {
70      if (!selector) return;
71
72      var $collection = $(selector);
73
74      if (!$collection.length) return;
75
76      config = config && $.isPlainObject(config) ? $.extend(true, {}, this._baseConfig, config) : this._baseConfig;
77
78      this.initFancyBox(selector, config);
79    },
80
81    initFancyBox: function (el, conf) {
82      var $fancybox = $(el);
83
84      $fancybox.on('click', function () {
85        var $this = $(this),
86          animationDuration = $this.data('speed'),
87          isGroup = $this.data('fancybox'),
88          isInfinite = Boolean($this.data('is-infinite')),
89          slideShowSpeed = $this.data('slideshow-speed');
90
91        $.fancybox.defaults.animationDuration = animationDuration;
92
93        if (isInfinite == true) {
94          $.fancybox.defaults.loop = true;
95        }
96
97        if (isGroup) {
98          $.fancybox.defaults.transitionEffect = 'slide';
99          $.fancybox.defaults.slideShow.speed = slideShowSpeed;
100        }
101      });
102
103      $fancybox.fancybox($.extend(true, {}, conf, {
104        beforeShow: function (instance, slide) {
105          var $fancyModal = $(instance.$refs.container),
106            $fancyOverlay = $(instance.$refs.bg[0]),
107            $fancySlide = $(instance.current.$slide),
108
109            animateIn = instance.current.opts.$orig[0].dataset.animateIn,
110            animateOut = instance.current.opts.$orig[0].dataset.animateOut,
111            speed = instance.current.opts.$orig[0].dataset.speed,
112            overlayBG = instance.current.opts.$orig[0].dataset.overlayBg,
113            overlayBlurBG = instance.current.opts.$orig[0].dataset.overlayBlurBg;
114
115          if (animateIn && $('body').hasClass('u-first-slide-init')) {
116            var $fancyPrevSlide = $(instance.slides[instance.prevPos].$slide);
117
118            $fancySlide.addClass('has-animation');
119
120            $fancyPrevSlide.addClass('animated ' + animateOut);
121
122            setTimeout(function () {
123              $fancySlide.addClass('animated ' + animateIn);
124            }, speed / 2);
125          } else if (animateIn) {
126            var $fancyPrevSlide = $(instance.slides[instance.prevPos].$slide);
127
128            $fancySlide.addClass('has-animation');
129
130            $fancySlide.addClass('animated ' + animateIn);
131
132            $('body').addClass('u-first-slide-init');
133
134            $fancySlide.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function (e) {
135              $fancySlide.removeClass(animateIn);
136            });
137          }
138
139          if (speed) {
140            $fancyOverlay.css('transition-duration', speed + 'ms');
141          } else {
142            $fancyOverlay.css('transition-duration', '1000ms');
143          }
144
145          if (overlayBG) {
146            $fancyOverlay.css('background-color', overlayBG);
147          }
148
149          if (overlayBlurBG) {
150            $('body').addClass('g-blur-30');
151          }
152        },
153
154        beforeClose: function (instance, slide) {
155          var $fancyModal = $(instance.$refs.container),
156            $fancySlide = $(instance.current.$slide),
157
158            animateIn = instance.current.opts.$orig[0].dataset.animateIn,
159            animateOut = instance.current.opts.$orig[0].dataset.animateOut,
160            overlayBlurBG = instance.current.opts.$orig[0].dataset.overlayBlurBg;
161
162          if (animateOut) {
163            $fancySlide.removeClass(animateIn).addClass(animateOut);
164            $('body').removeClass('u-first-slide-init')
165          }
166
167          if (overlayBlurBG) {
168            $('body').removeClass('g-blur-30')
169          }
170        }
171      }));
172    }
173  }
174})(jQuery);