metafizzy / flickity-fullscreen

Enable fullscreen view for Flickity carousels
46 stars 17 forks source link

Detect if flickity carousel is full screen and add class to parent wrapper #29

Closed Probablybest closed 4 years ago

Probablybest commented 4 years ago

I have multiple flickity carousel's on one page which have full screen enabled. What I'm trying to do is detect when the div.gallery__slides has the class is-fullscreen and add a class to the parent div .gallery-container of is-fullscreen.

Here is a jsFiddle of my code.

You can see where I have tried to add a simple hasClass but this doesn't seem to be working.

//is fullscreen detection
    if ($(".gallery__slides").hasClass("is-fullscreen")) {
      $(this).parent().addClass('is-fullscreen');
    }

Here is all my JS:

$(document).ready(function(){

  $('.gallery-container').each(function(i, container) {

  var options = {
    cellSelector: '.gallery__slide',
    cellAlign : 'center',
    pageDots : false,
    prevNextButtons : false,
    accessibility : false,
    wrapAround : true,
    imagesLoaded : true,
    pauseAutoPlayOnHover: false,
    fullscreen: true,
    lazyLoad: 1,
    autoPlay: 7000
  };
  var time = 2;
  var $bar,
      $slider,
      isPause,
      tick,
      percentTime;

  $('.gallery__slides').flickity(options);

    var $container = $(container);
    var $slider = $container.find('.gallery__slides');
    var flkty = $slider.data('flickity');
    var selectedIndex = flkty.selectedIndex;

    var slideCount = flkty.slides.length;
    var $pagers = $container.find('.gallery__page-dots');

    for (i = 0; i < slideCount; i++) {
      $pagers.append('<li class="gallery__page-dot-item"></li>');
    }

    var $pager = $pagers.find('li');

    var $caption = $container.find('.gallery__caption .image-caption');

    $slider.on( 'select.flickity', function() {
      // set image caption using img's alt
      $caption.text( flkty.selectedElement.children[0].alt );
      $pager.filter('.is-selected').removeClass('is-selected');
      $pager.eq(flkty.selectedIndex).addClass('is-selected');
    });

    $pagers.on( 'click', 'li', function() {
      var index = $(this).index();
      $slider.flickity( 'select', index );
    });

    // previous
    var $prev = $container.find('.prev');
    $prev.on( 'click', function() {
      $slider.flickity('previous');
    });
    // next
    var $next = $container.find('.next');
    $next.on( 'click', function() {
      $slider.flickity('next');

    });

        //is fullscreen detection
    if ($(".gallery__slides").hasClass("is-fullscreen")) {
      $(this).parent().addClass('is-fullscreen');
    }
  });
});