Hi everyone!
@thewonglv has written an easy to follow tutorial for creating a custom lightbox. I also followed up that article with a video tutorial. Check it out and let us know if it helps you out. 
Enjoy!
6 Likes
Great tutorial. Does anyone have an example of this running on their site? I want to compare this to doing a Modal. The main feature I’m after is the ability to close the popup by clicking anywhere outside the box (in addition to clicking an X button).
Lastly, I didn’t see a video, is there one?
Hi @a24hope,
As example, you can see it here http://saevskaya.webflow.io/gallery-eng and here http://art-sheffield.webflow.io/album2 (click on any image)
Cheers,
Anna
1 Like
Hi sabanna,
Thanks so much for your reply to my inquiry and for sharing the examples. Beautiful pages btw. I noticed in the first link you shared, a visitor would have to click the X to close the window, however in the second link, the visitor could click anywhere outside the box to close it. That’s the feature I’m after. Is the first link the modal design and the second link a lightbox design?
1 Like
Hi Aaron,
I apologize, in 2nd link I gave you the wrong page link (it is prototype to site). Totally forgot, that in album1 and album2 I used generic Webflow lightbox. But on album3 page I did custom lightbox on 1st image: http://art-sheffield.webflow.io/album3
In 1st link - it is the site with CMS so I used the same principal as modal popup, but inside every dynamic item. Which in result gives the same structure as custom lightbox. But with CMS it is much easier, create design/structure only once and it appears in every element.
For make lightbox closing on clicking anywhere, all you need is apply “close” interaction to that div, which is background for your image.
try refreshing the page. This was a known bug that was resolved today.
Is there an actual video? When I click on the video, nothing happens.