A lightbox example
It’s possible to launch a page into a floating box that will “hover” above the regular page of your website, also known as a “lightbox”. For instance, you may want to link to a page of another website or even a different page of your own showing promotional content, while the current page of your website is kept "underneath". That's different from linking to a blank (new) browser window or a even a regular popup window.
Launching a website into a lightbox
You can use this feature to launch a page of your own website or from another into the floating lightbox window, launched from a link:
Another application would be a glossary in which each term is a separate page (probably hidden from the normal navigation) that will appear in a floating box when you click its respective link. . The possibilities are varied.
Creating a Lightbox
- Edit the Word Processor content block where you would like to link to the lightbox content. You may load the lightbox content either using an internal link (i.e. a page from within your website) or an external link one (i.e. a page of another website).
- Now select the Advanced tab of the Link Properties and type the word lightbox into the Stylesheet Classes field:
That's it. The destination link will be loaded into a floating layer that will seem to float above the content underneath, which will be covered by a semi-transparent mask. People then can either click the "X" button or anywhere outside of the lightbox area to close it.
- The lightbox window is always 800x500 regardless of the content inside. They are responsive. For instance if your website is being viewed on a phone the lightbox will “shrink” automatically to fit within the small viewport.
- When loading a page from within your own website into the lightbox, you can use the Special tab of the destination page to hide some of its elements. You may also add arguments to the link in order to hide certain elements without affecting the page itself.
- The lightbox can be launched from any link, not necessarily text –you could use an image, for instance.
Launching a YouTube video into a lightbox
On YouTube, click the Embed option below the video and copy the text between brackets indicated below indicated below:
Paste that into your link in YWD, and type lightbox into the Stylesheet Classes field as explained above. That’s it.