Display videos or images in a lightbox popup

If you have the Soapbox CMS (Do I have the Soapbox CMS?) Within Non-Profit Soapbox, you have the ability to display videos and images in a lightbox popup. For an example of this functionality, see the Invisible People Video Project toward the bottom of the Bread & Hope demonstration site. If you wish to display an article in a lightbox popup, view Display an article or off-site content in a lightbox popup.

As you'll see, clicking on any of the video stills will cause them to open in a lightbox popup and gray out the background of the site for easy viewing. You will also be able to page between the videos from within the lightbox:

This can also be done with images so they display in a lightbox popup. For an example of this, view the Photography Exhibit and Fundraiser event detail page.

To add the lightbox popup functionality to your site, first:

1. Go to Extensions > Plugin Manager
2. Find System - JCE Utilities
3. Confirm that System - JCE Utilities is enabled. If it is not, enable it.
4. To adjust the parameters governing the speed at which the popup loads and the opacity of the background, edit the plugin and adjust the settings. You may wish to do so after taking the steps outlined below so that you can review the default functionality first. NOTE: By default, a magnifying glass appears over a link or image that hyperlinks to a lightbox popup. If you do not wish this to appear, edit System - JCE Utilities and change the Icons parameter midway down on the right column to No.

Display a video in a lightbox popup

You can add a hyperlink that opens an embedded video in a lightbox popup to text or an image anywhere you use the WYSIWYG editor. This includes but is not limited to an article, a Custom HTML module, an Events page, a Donations page, a Directories page, or Forms page. To do so, open the item you wish to edit:

1. Select the text or image you wish to link from in the editor
2. Click Insert / Edit Link
3. In the popup, place the url of the video you wish to embed
   
   
4. If you wish to include text at the bottom of the lightbox popup that gives context to the video, it can be included in the Title field in the Insert / Edit Link popup. Basic HTML can be used.
5. Click the Advanced tab
6. For Class List, choose "jcepopup" from the dropdown
7. For Classes, confirm that "jcepopup" has been entered by the system
   
   
8. If you wish to have this video included as a set with others which the visitor can click through within the popup as with the Invisible People example, for "Relationship page to target", choose Next
9. Repeat this for each element you wish to include in the pagination of the lightbox. NOTE: This can include a mix of videos, images and content.
10. Click Save

Display an image in a lightbox popup

You can add a hyperlink that opens an image in a lightbox popup to text or an image anywhere you use the WYSIWYG editor. This includes but is not limited to an article, a Custom HTML module, an Events page, a Donations page, a Directories page, or Forms page. To do so, open the item you wish to edit:

1. Select the text or image you wish to link from in the editor
2. Click Insert / Edit Link
   
   
3. In the popup, place the relative url of the image file you wish to embed, if the image is saved to your Soapbox storage directory in the Media Manager. For example, an image in the Photography Exhibit and Fundraiser example was entered as "storage/images/fullchile-10.jpg" (without quotes).
4. If you wish to include text at the bottom of the lightbox popup that gives context to the video, it can be included in the Title field in the Insert / Edit Link popup. Basic HTML can be used.
5. Click the Advanced tab
6. For Class List, choose "jcepopup" from the dropdown
7. For Classes, confirm that "jcepopup" has been entered by the system
8. If you wish to have this image included as a set with others which the visitor can click through within the popup as with the Invisible People example, for "Relationship page to target", choose Next
9. Repeat this for each element you wish to include in the pagination of the lightbox. NOTE: This can include a mix of videos, images and content.
10. Click Save