Streaming live at 10am (PST)

How to create a custom lightbox (Tutorial + Video)


#1

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. smile

Enjoy!

http://help.webflow.com/faq/how-to-make-a-custom-lightbox-with-webflow-interactions


Mimic the lightbox from this website: http://www.subcreative.com.au/?
How to customize Webflow's lightbox widget's fullscreen popup display?
Image Gallery lightbox
How to build an information pop up form that connects with marketing automation platform
Modal popup - problem with Chrome
#2

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?


#3

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


#4

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?


#5

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.


#6

For make lightbox closing on clicking anywhere, all you need is apply "close" interaction to that div, which is background for your image.


#7

The text on this link seems off...any idea how to fix it? It's doing this on Chrome and Safari.


#8

try refreshing the page. This was a known bug that was resolved today.


#9

Is there an actual video? When I click on the video, nothing happens.


#10