https://www.hendricksonpublishers.com/js-pt/min/home-new.js

1// ======================================
2// Home Cycle Carousel
3// ======================================
4
5jQuery(document).ready(function($) {
6  // Connected Elements
7  var home = {
8    // Carousels
9    $recommendedCarousel: $('.carousel-slideshow.desktop'),
10    $recommendedCarouselMobile: $('.carousel-slideshow.mobile'),
11
12    // Jquery Elements
13    $tabs:                $('#carousel-slideshow__tabs a'),
14    $inactiveSlides:      $('#inactive-slides'),
15    $video:               $('#video-widget'),
16
17    // Timeouts
18    captionTimeout:       null,
19
20    lazyLoadAdjacent: 5,
21
22    init: function() {
23      this.buildCarousels();
24      this.setBindings();
25      return this;
26    },
27
28    buildCarousels: function() {
29      var obj = this;
30      var $carousel = this.$recommendedCarousel.flickity({
31        cellSelector:     '.carousel-slide',
32        pageDots:        false,
33        //wrapAround:      true,
34        cellAlign:       "left",
35        lazyLoad:        true,
36        lazyLoadAdjacent: obj.lazyLoadAdjacent,
37        imagesLoaded: true,
38        contain: true
39      });
40
41      this.$recommendedCarouselMobile.flickity({
42        cellSelector:     '.carousel-slide',
43        pageDots:        false,
44        //wrapAround:      true,
45        cellAlign:       "left",
46        lazyLoad:        true,
47        lazyLoadAdjacent:obj.lazyLoadAdjacent,
48        contain: true
49      });
50
51      var flkty = $carousel.data('flickity'),
52        totalLength = flkty.cells.length;
53
54      // disable next button on load if number of products visible on the screen is less than the expected products of the div
55      if(totalLength <= obj.lazyLoadAdjacent){
56        $('.carousel-slideshow.desktop .flickity-prev-next-button.next').attr('disabled', true);
57      }
58
59      /* $(document).on('click', '.carousel-slideshow.desktop .flickity-prev-next-button', function(){
60        var index = flkty.selectedIndex;
61        if(index == parseInt(totalLength - obj.lazyLoadAdjacent)){
62          $(this).attr('disabled', true);
63        }else{
64          $('.carousel-slideshow.desktop .flickity-prev-next-button').attr('disabled', false);
65        }
66      }); */
67
68    },
69
70    setBindings: function() {
71      this.$tabs.click(this.changeTab.bind(this));
72
73      this.$video.find('.vpb').on('click', this.displayVideo.bind(this));
74    },
75
76    setActiveSlides: function(activeType) {
77      var $newSlides = this.$inactiveSlides.find('div.carousel-slide.' + activeType).detach();
78      var $oldSlides = $(this.$recommendedCarousel.flickity('getCellElements'));
79
80      this.$recommendedCarousel.flickity( 'append', $newSlides );
81      this.$recommendedCarousel.flickity( 'remove', $oldSlides );
82
83      $oldSlides.appendTo(this.$inactiveSlides);
84    },
85
86    changeTab: function(event) {
87      $('.carousel-slideshow.desktop .flickity-prev-next-button').attr('disabled', false);
88      $this = $(event.target);
89
90      if ($this.hasClass('active')) return;
91
92      this.setActiveSlides($this.attr('show-type'));
93
94      if (!$this.hasClass('active')) {
95        this.$tabs.each(function(index, tab) {
96          $tab = $(tab);
97          if ( $tab.is($this) )
98            $tab.addClass('active');
99          else
100            $tab.removeClass('active');
101        });
102      }
103
104      event.preventDefault();
105    },
106
107    displayVideo: function(event) {
108      var $wrapper = this.$video.find('.videoWrapper');
109      var videoId = this.$video.attr('video-id');
110
111      $('<iframe></iframe>')
112        .attr({
113          width:            '420',
114          height:           '315',
115          src:              'https://www.youtube.com/embed/' + videoId + '?autoplay=1',
116          frameborder:      0,
117          allowfullscreen:  ''
118        })
119        .appendTo($wrapper);
120
121      this.$video.find('.videoImage').hide();
122    }
123  }.init();
124
125});