I created my own image carousel and a generic lightbox component to go with it. So far only the image carousel is using this slider style lightbox, but I intend to use for future components. These are both bookshop components created using GlideJS.
Features of the carousel:
- First image is considered the featured image which will always take up the full grid space
- Clicking on any image correctly opens the lightbox to it
- It’s one of those “of course it should work that way” kind of feature
- Image grid size changes depending on how many images are inputted
- 2–24 images: 2x2 grid layout.
- 25–42 images: 3x2 grid layout.
- 43+ images: 3x3 grid layout.
- How many images are on the bottom carousel depends on screen size.
- In hindsight adding a horizontal scroller with all the images would have been a more practical solution. This version is more seems more “elegant” but makes going through large amounts of images on mobile a pain.
Live demo on my test site:
Code:
If anyone else happens to be creating their own image carousel or lightbox, hopefully this speeds up your process.
The Backstory
I recently finished creating a “listings” feature for my template, and something I created just to support that feature was an carousel image gallery. I fall into the anti carousel camp, but I think images are the exception.
In my research I was seeing what some of the big listing websiest were doing to display a large volume of images for their listings. I looked at Craigslist, Carmax, Facebook Marketplace, and Apartments dot com. Ultimately I liked the style of the gallery that Carmax and Apartments dot com had the most. I took design elements from both to create my own version. Now that I mention creating my own version.
I wasn’t expecting to create my own image carousel and lightbox from scratch when I first set out to create this feature. My original plan was to find the closest free open source project that could meet my needs and that I could tweak a bit if needed. I did find a paid option lightGallery and a free option PhotoSwipe.
I was going to originally go with PhotoSwipe, but two things steered me away.
- Image width and height needed to be defined for each image.
- I would have to create my own markup for the 11ty image plugin.
For the first item, I don’t know how to do this and I wasn’t interested in learning because of a time crunch I put on myself to ship the feature. For the second point, I didn’t want to spend the time writing my own markup that the 11ty img plugin uses since that would also take up time. And yet, I thought that the fastest route would be to write me own…
After some more research I found about GlideJS and the rest is history.
