Resize multiple flickity galleries

[lamalamaMark]

I can initialize multiple galleries via an .each loop:

$('.gallery').each(function() { $(this).flickity({ contain: true, wrapAround: true }); });

When I try to access the Flickity instances in order to fire the resize action I get the error that flickity is not defined. The $(this)[0] element seems to be correct.

$('.gallery').each(function() { var flkty = Flickity.data( $(this)[0] ); flkty.flickity('resize'); });

Bug or am I doing something really wrong?

[desandro]

I'm sorry to see you're having trouble with Flickity. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

[lamalamaMark]

Thanks for your response. In the test case everything is working fine :) http://codepen.io/anon/pen/KVePVy

Op do 28 jan. 2016 om 18:28 schreef David DeSandro <notifications@github.com

:

I'm sorry to see you're having trouble with Flickity. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines https://github.com/metafizzy/flickity/blob/master/contributing.md#submitting-issues .

— Reply to this email directly or view it on GitHub https://github.com/metafizzy/flickity-docs/issues/35#issuecomment-176292571 .

[image: Lama Lama] https://lamalama.nl/

Mark de Vries

06 418 43 246 mark@lamalama.nl lamalama.nl

Herengracht 142 1015 BW Amsterdam 020 6 220 440

[desandro]

  $(window).resize(function() {
    $('.gallery').each(function() {
      var flkty = Flickity.data( $(this)[0] );
      flkty.flickity('resize');
    });
  });

This code is not necessary as Flickity already has resize logic built in. In fact, you can reduce all your code to

$('.gallery').flickity()

See demo on CodePen

[23d1]

How would one go about this with vanilla js?

[desandro]

@23d1

You could keep track of your Flickity instances in an array:

var flickities = [];

var carousels = document.querySelectorAll('.carousel');

for ( var i = 0; i < carousels.length; i++ ) {
  var carousel = carousels[i];
  var flkty = new Flickity( carousel, {
    // options
  });
  flickities.push( flkty );
}

// trigger resize on all Flickity instances
flickities.forEach( function( flkty ) {
  flkty.resize();
});

[23d1]

@desandro thanks, will try it out in a bit. Does this work for inline initialized flickity carousels?

On a similar note, I'm setting the min-height to 100% on the cells as I want to create carousels based on the tallest cell, and then having the rest conform in width and height with cover-sizing. When the browser scales down horizontally (or you flip a phone/pad over) they keep the initialized height. Only when scaling up do they resize properly. Any quick and easy (or dirty) way to work around this?

[desandro]

@23d1 See metafizzy/flickity#534