Image Gallery / Lightbox


I'm wondering if anyone has suggestions for a lightbox to use with Prismic and Next.js/React.

There are a lot out there, but I'm a bit lost trying to pick one for my specific task:

  • I have 'project' pages which are made out of custom page fields, and multiple slices with text and images.
  • Any image on the page, i want to be able to click and have it pop up in a light box overlay, then to be able to navigate next / prev in the light box gallery.

I want to be able to customize the button icons / layout of the gallery, and i guess some basic stuff like transitions between images, and making the images fill the screen, ability to swipe on mobile etc. Maybe some Next SSR optimization?

Something like 'Yet another React Lightbox' but would be fine, i'm not sure how i would generate the array of images it requires since all the images come from slices as opposed to being loaded in a single component.

In the past I have used lightboxes that basically just look for images with an attribute like data-lightbox="gallery1" and maybe wrapped the images in links like <a href=".../img/src.jpg"> but this doesn't seem to be a very React / Next way of doing things? Or perhaps its fine?

Hey Tim, I've seen projects using Fancybox to easily enhance the creation of CSS components.

Thanks! I just got around to adding the Fancybox integration and can confirm it works great!