Creating a thumbnail gallery with Lightbox

Design help General
1

Hi there,

I’m working with an electrician to create a landing page for his business. They want a gallery to showcase their commercial and residential work, and I would like to make something like the image attached. Thumbnails of images that expand in a Lightbox, without the large Lightbox image first that usually on display.

Is there a best way to create this in Webflow?

Screen Shot 2021-09-30 at 3.46.09 PM
Screen Shot 2021-09-30 at 3.46.09 PM1920×996 102 KB

I’m also including a link there. https://www.tomslandscapingllc.com

Thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Dbisbee, thanks for your post.

Would it be possible for you to help share some additional detail that will help the community to provide assistance?

3

Hi @cyberdave, I don’t have anything available to share yet.

My goal right now is to figure out if I can design the same gallery concept in Webflow before presenting ideas to the client. I asked for help because I don’t know where to start with the concept.

I might have made a mistake by asking for help too early. Sorry about that.

4

Hi @Dbisbee, thanks for your reply, you can create a gallery of lightboxes, take a peek here: https://webflow.com/feature/create-lightbox-galleries-with-your-cms-and-ecommerce-photos-and-videos

You can size the image used for the lightbox to be a small thumbnail, then when clicked can open the larger image. I might be confused though on what you are trying to achieve.

I hope this helps!

5

Hi, can you direct me through the process with the new UI. I am neither able to find the ‘link all lightboxes’ option in the new UI and nor able to find any tutorials with the new UI.
Is it some paid feature that I am missing?
For preview

6

@P_trishita -When you select a lightbox item go to the style panel => Settings => Lightbox link settings.

image
image1046×810 93.6 KB

7

Hi, thank you so much for the reply! In creating a collection though, no matter which image I click on, it takes me to the first image in the collection right? Anyway that can be avoided or would I have to use custom code?