Resize Event

[dev4q1]

Hi,

would it be possible to listen to the resize event when the gallery resizes?

[desandro]

Could you explain what you're trying to do with such an event? If you're adding behavior on resize, there might be a simple way than using an event.

[graygilmore]

Personally, I have a use case where I'm also setting Flickity's parent to the same height. This will allow me to destroy Flickity and rebuild with new images (think of a product page where the images change when you select a new product color) and not have the container jank around before the new images have loaded.

I agree that a resize event doesn't make a lot of sense as you could just watch window.onresize but I would love to just be able to watch for a Flickity event instead. I would love an event like fiinished or calculated (something in that vein) where I could confidently look up maxCellHeight right after.

As a test run I put this.dispatchEvent('calculated'); inside the _positionCells(): http://codepen.io/graygilmore/pen/4c622f9a3633592342548cef78374bf3?editors=101

You can destroy, build, and resize and it should keep its shape.

[desandro]

@graygilmore Have you tried using setGallerySize: false and using CSS to size the gallery instead?

[graygilmore]

That would be my preferred choice, could just do the ol' height: 0; padding-top: $aspect-ratio; but my particular use case is a little complicated. I should revisit that, though, good call.

[graygilmore]

@desandro that solution actually worked great in this case. I was overcomplicating things by trying to address the parent of Flickity instead of Flickity itself. Thanks!

[dev4q1]

Hi,

I have a google map next to the flickity gallery which should always be the same height as the the gallery itself when resizing the window. I don't know if it is normal behavior for the gallery but when resizing the window the gallery takes some milliseconds to resize itself hence the height isn't always correct when I try to set the google map height same as the gallery. So I would like to listen to the resize of the gallery to get the final height.

Maybe I'm approaching this whole thing the wrong way. Thanks for your help!

On 10 Jul 2015, at 19:33, David DeSandro notifications@github.com wrote:

Could you explain what you're trying to do with such an event? If you're adding behavior on resize, there might be a simple way than using an event.

— Reply to this email directly or view it on GitHub.

[desandro]

Thanks for the explanation. I feel the best solution is to use [CSS with setGallerySize: false]http://flickity.metafizzy.co/options.html#setgallerysize), rather than listening for a resize event.

[chpio]

Hi, so there's no resize event provided by flickity? I need to do that aspect-ratio css thing, but the other way around. The height of my cells is static but it need to set the width accordingly to an aspect ratio. That's not working with that css trick, so i need to do it in js. A resize event would be really helpful.

[chpio]

i solved my problem by overriding the resize method:

class MyCarousel extends Flickity {
    resize() {
        if (this.isActive) {
            // recalculate cell sizes

            super.resize();
        }
    }
}