Santa Clara University

Web Publishing @ SCU

Lightbox Display

Use this element to display linked content in a Lightbox view. This element is useful for displaying full-size versions of images linked from a table of thumbnail images, or opening a video player from a widget or thumbnail image.

How to use this element

The Lightbox Display will be applied to any links within a page that are contained within a block with the 'lightbox' style assigned. As an example, if you have a group of thumbnail images in a rich-text editor element, you can add the 'lightbox' class to the element's style settings.

Style form

Once the style is set, add the Lightbox Display element from the Content Well element gallery category, and configure as needed.

Display Options

You can modify the overlay color, opacity of that color, the border around the content, the content type, and width and height of the content display. For links to images, the 'type' can be set to 'any'. The element will attempt to figure out what content type to set based on the link URL. If you're linking to content embedded in an html page, such as a video player, you would select the 'iframe' type.

In this example, the widget images are linked to html pages with a Flash player and video content, so we've set the type to 'iframe', and we've changed the width and height settings to match the dimensions of the video player.

Video Player URL formats

When linking to a YouTube or Vimeo hosted video, you would typically want to just have the video player in the Lightbox rather than a complete YouTube or Vimeo page. The following URL formats will allow you to just include the video player:

YouTube -[video ID]

Vimeo -[video ID]

Printer-friendly format