Thumbnail image customization

[hunex91]

Hello!

Kudos for your work, this library works great! Just recently got an individual license and started integrating your library in my project.

I couldn't find a way to target and customize the thumbnail images. What I am trying to achieve is to set the img's object-fit to contain instead of cover. I found in the docs that you could customize the large lightbox image with the lightboxImgClass prop. Would it be possible to do something similar for the thumbnail images as well? Maybe with a new thumbnailImgClass prop?

[cschuch]

Piggy backing on this - might it be possible to specify a different src for thumbnails as well?

I'd like to put higher-res paths for the actual image being displayed in the slideshow, and much smaller images for the thumbnails to cut down on bandwidth... but it seems like the only option is to use my big files as the thumbnail src.

[silvia-odwyer]

@hunex91 Thanks for this great feature request! I've just released a new version of the library, which contains a thumbnailImgClass prop. Custom classnames can be passed to this prop in order to add custom styling to the lightbox's thumbnails. Hopefully that helps, and let me know if you have any queries.

[silvia-odwyer]

@cschuch A new version of the library has been released, which contains the new functionality you mentioned. You can now specify a different image src for each of the thumbnail images in the lightbox. This can be achieved by creating an array of images (as shown below), and then adding a thumbnailSrc property to each of the objects in the array. This array is then passed to the images prop:

Here's an example:

const images = [
  {
    src: 'https://source.unsplash.com/2FiXtdnVhjQ/1200x900',
    thumbnailSrc: 'https://source.unsplash.com/2FiXtdnVhjQ/500x300'
  },
  {
    src: 'https://source.unsplash.com/kID9sxbJ3BQ/1200x900',
    thumbnailSrc: 'https://source.unsplash.com/kID9sxbJ3BQ/500x300'    
  },
];

Then, just pass this array to the SlideshowLightbox component, like so:

<SlideshowLightbox images={images} lightboxIdentifier="lbox1" className='container grid grid-cols-3 gap-2 mx-auto'>
  {images.map((image) => (
    <img
      src={image.src}
      alt={image.caption}
      height={500}
      width={500}
      data-lightboxjs="lbox1"
   />
  ))}
</SlideshowLightbox>

If you're using Next.js, be sure to take a look at the guide here, as there is a slightly different configuration required for Next.js sites.

Hopefully that helps, and if you have any queries, just let me know.

[hunex91]

@silvia-odwyer I just installed the new version and it works wonderfully. Could easily customize the thumbnail image now. Thanks!