search

metafizzy / flickity-fullscreen

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

Specifying different resolutions for carousel and fullscreen #14

Closed mkasu closed 6 years ago

mkasu commented 6 years ago

Is it currently possible to specify different resolutions for when fullscreen is triggered?

In my use-case, I want to show a (low resoluted) overview of multiple images in a flickity carousel, with the option to open a high resolution version in full screen.

I played around with lazyload and srcset, but could not come up with a satisfying solution yet. It'd still load at least the first image of every carousel in highest resolution.

I'd be helpful if being able to set different srcs for the carousel and for fullscreen.

desandro commented 6 years ago

One solution is to use CSS. Flickity adds is-fullscreen class. So you could have both low-res & high-res images in the HTML and show/hide them depending on if is-fullscreen is there.

.carousel .low-res { display: block; }
.carousel .high-res { display: none; }

.carousel.is-fullscreen .low-res { display: none; }
.carousel.is-fullscreen .high-res { display: block; }

Otherwise, you can use fullscreenChange event with some custom JS to edit images and load high-res images. I'll leave that implementation up to you.

mkasu commented 6 years ago

Thank you for the quick response. I played with the CSS-based solution, and it seems to do what I want.

It does not seem to play well with flickity-lazyload, but I managed to mix in some jquery-lazyload to get a solution I'm happy with.

If someone wants to do something similar, here is a link to my website where I use it for screenshots in reviews. Feel free to look in the code. Might be a bit hacked together though. I combined flickity, lazyload, fullscreen, and asnavfor. The navigation uses 150x150px, the carousel up to 500x500, and the fullscreen up to 1500x1500 (responsive.)

https://www.productived.net/review-omnifocus-3/