This would definitely be tricky, but I don’t think it’s impossible. One method would be to add a div block and have it sit along the entire bottom of the modal.
Then you can drop in a slider component and set each slide to be something like 10% width so 10 slides will show in the full width slider. From here, you can drop inline images into each slide of the slider. Then, you can create an individual interaction for each thumbnail that, when clicked, will bring up the correct main image.
Definitely complex build, but it may help you here!
I’m super new to webflow, and am looking to embed a CMS gallery like everyone else. I’ve followed the instruction in this post, and while the lightbox appears just fine, it’s pulling in images from items in other collections, rather than images in the one collection I’m in.
It seems like it’s pulling in the Image 1 field from all collections, rather than pulling in all images for the collection I want. Adding a field is only showing individual image fields though, so I’m not sure how to get around it.
Out of topic. You use huge images (2-4 mb!!) - resize the image to 1500-2000px and compress the images with tinyjpg.com
About your CMS. You put image1 as a field (So your collection is only with image1). Sorry i never use the trick from the tutorial - try to find the answer in the examples (106 answers). Or open new Q in the forum.
I’ve implemented this and it’s working great, but the captions don’t seem to be accepting special characters like quotation marks. They revert them over to ASCII. Any help here?
I got the lightbox to work but I don’t want to show every image on the page, only a single thumbnail/link block like the image above then have the images appear inside the lightbox. is this possible?
Hello oramsdesign, I do not know what I’m doing wrong and it’s not working. I think it’s a lack of programming knowledge.
Here is my shared project. Could you, please, have a look and tell me what I am doing wrong?
you can do this by placing the above html code and your cms lightbox into a container with the background image set to your desired thumbnail image then reduce the opacity of your html code to 0 under effects. This should make the link clickable.
This is how I got it to work on a client site but the lightbox starts at the end, which is why I’m on this thread. Hope that helps and if you can figure out a work around for fixing the display order, let me know.