https://kroll.be/files/skins/ff2e028d-fec3-47eb-9430-aecec9336ce5/js/z.skin.js

1(function($) {
2  'use strict';
3  // jQuery document ready
4  $(function() {
5    // smart menus from library
6    $($.SmartMenus.Bootstrap.init);
7
8    // Image lazy load from library
9    $("img.lazyload").lazyload({
10      effect: 'fadeIn'
11    });
12
13    //checkout page summary stick, from library
14    $(".side-col").stick_in_parent();
15
16    //suggested products area
17    if ($("body").hasClass("pageType_product")) {
18      var suggestedOwl = $('.suggested-products').owlCarousel({
19        margin:20,
20        loop:false,
21        nav:true,
22        dots:false,
23        navText:['<i class="fa fa-fw fa-angle-left"></i>','<i class="fa fa-fw fa-angle-right"></i>'],
24        autoHeight:true,
25        responsive:{
26          0:{
27            items:1
28          },
29          430:{
30            items:2
31          },
32          768:{
33            items:3
34          },
35          992:{
36            items:3
37          },
38          1200:{
39            items:3
40          }
41        }
42      });
43      suggestedOwl.on('mousewheel', '.owl-stage', function (e) {
44        if (e.deltaY>0) {
45          suggestedOwl.trigger('next.owl');
46        } else {
47          suggestedOwl.trigger('prev.owl');
48        }
49        e.preventDefault();
50      });
51    }
52
53    //Product Image Gallery
54    if ($('body').hasClass('pageType_product')) {
55      //get all gallery items
56      window.galleryItems = [];
57      window.isSingleImage = true;
58
59      //init photoswipe
60      var initPhotoswipe = function () {
61        var $pswp = $('<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"></div><div class="pswp__scroll-wrap"><div class="pswp__container"><div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div></div><div class="pswp__ui pswp__ui--hidden"><div class="pswp__top-bar"><div class="pswp__counter"></div><a class="pswp__button pswp__button--close" title="Close (Esc)"></a> <a class="pswp__button pswp__button--share" title="Share"></a> <a class="pswp__button pswp__button--fs" title="Toggle fullscreen"></a> <a class="pswp__button pswp__button--zoom" title="Zoom in/out"></a><div class="pswp__preloader"><div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div></div></div><div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></div></div><a class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></a> <a class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></a><div class="pswp__caption"><div class="pswp__caption__center"></div></div></div></div></div>')
62          .appendTo('body');
63        window.pswp = $pswp[0];
64      };
65      initPhotoswipe();
66
67      var openPhotoswipe = function (index) {
68        var options = {
69          bgOpacity: .5,
70          index: index,
71          history:false
72        }
73        var gallery = new PhotoSwipe(window.pswp, PhotoSwipeUI_Default, window.galleryItems, options);
74        gallery.init();
75      };
76
77      var $desktopGallery = $('.product-image-gallery.desktop');
78      var $mobileGallery = $('.product-image-gallery.mobile');
79
80      //**** Desktop Gallery ****
81      //desktop gallery always on page
82      var $desktopCarousel = $('.product-gallery-carousel',$desktopGallery);
83      var $desktopPrimaryImageLink = $('.product-gallery-primary > a',$desktopGallery);
84      var $desktopPrimaryImage = $desktopPrimaryImageLink.find('img');
85
86      if ($desktopCarousel.length) {
87        window.isSingleImage = false;
88      }
89
90      //fetch gallery data
91      if(!window.isSingleImage){
92        var $desktopCarouselLinkItems = $desktopCarousel.find('.product-gallery-carousel-item > a');
93        $desktopCarouselLinkItems.each(function () {
94          window.galleryItems.push({
95            src: $(this).attr('href'),
96            msrc: $(this).data('src'),
97            w: $(this).data('width'),
98            h: $(this).data('height')
99          });
100        });
101      }
102      else{
103        window.galleryItems.push({
104          src: $desktopPrimaryImageLink.attr('href'),
105          msrc: $desktopPrimaryImageLink.find('img').attr('src'),
106          w: $desktopPrimaryImageLink.data('width'),
107          h: $desktopPrimaryImageLink.data('height')
108        });
109        $desktopPrimaryImageLink.data('index',0);
110      }
111
112      //init desktop carousel

113      $desktopCarousel.owlCarousel({
114        margin: 20,
115        dots: false,
116        nav: true,
117        navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
118        autoHeight: true,
119        lazyLoad: true,
120        navElement: 'a',
121        responsive: {
122          0: {
123            items: 6,
124            slideBy:6
125          },
126          992: {
127            items: 5,
128            slideBy:5
129          },
130          1200: {
131            items: 6,
132            slideBy:6
133          }
134        }
135      });
136      $desktopCarousel.on('loaded.owl.lazy', function (e) {
137        $(e.element).closest('.product-gallery-carousel-item').addClass('loaded');
138      });
139
140      var changeCurrentImage = function (index) {
141        //switch primary image
142        $desktopPrimaryImageLink.data('index', index);
143        $desktopPrimaryImageLink.attr('href', window.galleryItems[index].src);
144        $desktopPrimaryImage.attr('src', window.galleryItems[index].msrc);
145
146        if(!window.isSingleImage)
147        {
148          //set desktop carousel active item
149          $desktopCarouselLinkItems.removeClass('gallery-current');
150          $desktopCarouselLinkItems.eq(index).addClass('gallery-current');
151        }
152      };
153      changeCurrentImage(0);
154
155      //carousel item click event
156      $desktopCarousel.on('click','.owl-item', function (e) {
157        e.preventDefault();
158        var index = $(this).index();
159        changeCurrentImage(index);
160      });
161
162      //primary image click event
163      $desktopPrimaryImageLink.on('click', function (e) {
164        e.preventDefault();
165        var index = $(this).data('index');
166        openPhotoswipe(index);
167      });
168
169      //**** Mobile Gallery ****
170      if($mobileGallery.length){
171        if(!window.isSingleImage){
172          var $mobileCarousel = $('.product-gallery-carousel',$mobileGallery);
173          $mobileCarousel.owlCarousel({
174            margin: 20,
175            dots: false,
176            nav: true,
177            navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
178            autoHeight: true,
179            lazyLoad: true,
180            navElement: 'a',
181            responsive: {
182              0: {
183                items: 1,
184                slideBy:1
185              }
186              ,
187              768:{
188                items: 2,
189                slideBy:2
190              }
191            }
192          });
193          $mobileCarousel.on('loaded.owl.lazy', function (e) {
194            $(e.element).closest('.product-gallery-carousel-item').addClass('loaded');
195          });
196          $mobileCarousel.on("click", ".owl-item", function(e){
197            e.preventDefault();
198            var index = $(this).index();
199            openPhotoswipe(index);
200          });
201        }
202        else{
203          var $mobilePrimaryImageLink = $('.product-gallery-primary > a',$mobileGallery);
204          $mobilePrimaryImageLink.on('click', function (e) {
205            e.preventDefault();
206            openPhotoswipe(0);
207          });
208        }
209      }
210
211
212    }
213
214
215  });
216
217})(jQuery);