[Feature Request] The ability to have the gallery preview only show one image.

[JaredPage]

Currently, all the demos and functionality has the gallery images on display without the lightbox. So you can see all the images without the lightbox, just smaller (and without zoom, slideshow etc).

What I would like is the ability to have one 'cover' image which when clicked on, opens up the gallery of images 'attached' to it in a lightbox. So, for example, in the Product Listing Demo (https://www.getlightboxjs.com/demo/ProductListingDemo), it would be cool if you clicked on the macaroons and you got more pictures (in a lightbox) of those particular macaroons rather than the pictures of the adjacent pancakes and berry cakes.

The desired syntax might be something like:

<SlideshowLightbox useCoverMode={true}>
    <CoverImage src='...' />
    <img src='...' />
    <img src='...' />
    <img src='...' />
</SlideshowLightbox>

In this example, the <CoverImage> would be the only one visible on the normal page until it is clicked on, then the 3 other images (plus the CoverImage) would appear in the lightbox for scrolling. An argument could be made to exclude the cover image from the lightbox too (maybe another param).

I hope this makes sense!

[silvia-odwyer]

@JaredPage Hi Jared, Thanks for the excellent feature request! I've just implemented this feature, and it's now available as part of the latest version release of the library. If you uninstall your current version and re-install the latest version, the feature should be available.

In order to also support Next.js, I've decided to go with an implementation that involves passing an image array to the lightbox, and I've provided steps on how to do this below.

Here's a quick preview of what it looks like:

Firstly, create an array of image elements and add a cover property to the cover image. In this example, the first image object in the image array is the cover image:

const coverExampleImages = [
    {
      src: 'https://images.pexels.com/photos/1346345/pexels-photo-1346345.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
      alt: "Macarons within a box",
      cover: true
    },
    {
      src: 'https://source.unsplash.com/WbZesfqwR-A/1400x1200',
      alt: "Stacked macarons"
    },
    {
      src: "https://images.pexels.com/photos/808941/pexels-photo-808941.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
      alt: "Pastel macarons",
    },

  ]

You can then enable cover mode by setting useCoverMode to true, and passing the image array to the images prop The cover image element (to be displayed outside the lightbox) can be added within the <SlideshowLightbox> component. If you'd like to display more than one cover image outside the lightbox, this is also possible. Might be useful if you want to show one/two+ images on the web page and then the remainder in the lightbox.

Additionally, a data-lightboxjs attribute is required in order to add lightbox support for that image; it should be equal to the value of the lightboxIdentifier prop.

    <SlideshowLightbox images={coverExampleImages} lightboxIdentifier="lightbox2"
      useCoverMode={true} showThumbnails={true} theme={"day"}>
            <img
              src={coverExampleImages[0].src}
              alt={coverExampleImages[0].alt}
              height={300}
              width={300}
              data-lightboxjs="lightbox2"
            />

      </SlideshowLightbox>

If you don't want to include the cover image in the lightbox, just set the coverImageInLightbox prop to false. The image array will be filtered so that the images with the cover property set to true are removed.

<SlideshowLightbox 
      coverImageInLightbox={false}>
...
</SlideshowLightbox>

Hopefully that helps, but if you have any queries, be sure to let me know. Thanks! 😄

[JaredPage]

Awesome work @silvia-odwyer ! I've tested this, and all the params, and everything seems to be working perfectly for me! Thanks!!

[JaredPage]

Would you like me to leave this issue open for documentation purposes? Otherwise happy to close it.

Couple of small notes to your reply above as well:

1. Need to document what the cover: true does as it seems like a double up, since the cover image is also added within the <SlideshowLightbox> component). I found out this was to remove it when coverImageInLightbox is set to false. I haven't looked, but I'm assuming you check for this bool rather than matching the src url which might remove duplicates.
2. coverExampleImages[0].caption should be coverExampleImages[0].alt according to your object array.

[silvia-odwyer]

@JaredPage I'm glad it's working for you! Thanks for mentioning those two notes, I've just edited the code sample to reflect point number 2. ✅

With regards your first point about cover: true, that's correct, any images that have the cover property set to true will be removed if the coverImageInLightbox is set to false.

You can close this if you wish, as I'll create a guide about this feature in the documentation also.