Add attribute to specify larger image version for fullscreen view

[wc-matteo]

And the image switch happening when entering/exiting fullscreen

[desandro]

To be clear, do you want to show a different image when fullscreen?

[wc-matteo]

Yes

[desandro]

Here are two ways:

Display different <img> with .is-fullscreen CSS.

<div class="carousel-cell">
  <img class="image-preview" src="preview.jpg" />
  <img class="image-fullscreen" src="fullscreen.jpg" />
</div>

/* hide by default */
.image-fullscreen { display: none; }

/* show fullscreen image when fullscreen */
.carousel.is-fullscreen .image-preview { display: none; }
.carousel.is-fullscreen .image-fullscreen { display: block; }

Or you can dynamically change the image src attribute on fullscreenChange event

[wc-matteo]

Thank you.

Yes, I had changed the src using the fullscreenChange event. I was wondering if this could be something offered out of the box.

[desandro]

I am considering a separate library that focuses just on photo carousels. But, for Flickity specifically, I think this behavior is better address in your code, to allow the most flexibility.