Display an article or off-site content in a lightbox popup

created

If you have the Soapbox CMS (Do I have the Soapbox CMS?) - within Non-Profit Soapbox, you have the ability to display an article on your site or off-site content 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 and click on "View our calendar of upcoming events". If you wish to open an embedded video or image in a lightbox popup, view Display videos or images in a lightbox popup.

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 off-site content in a lightbox popup

You can add a hyperlink that opens off-site content 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 external link
  4. Add a height and width to the Title field of the popup, such as "width[900];height[400]" (without the quotes)

    widthheight.png

  5. Click on the Advanced tab while in the Link Manager
  6. Select “jcepopup” from the Class List drop down

    jcepop.png

Display an article in a lightbox popup

You can add a hyperlink that opens an article on your site 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 non-SEF url by browsing to the content or menu item from the Link Manager.
  4. In the URL that gets created, change index.php to index2.php. This keeps the full site from loading in the popup. Instead only the content will load.
  5. Add a height and width to the Title field of the popup, such as "width[900];height[400]" (without the quotes)
  6. Click on the Advanced tab while in the Link Manager
  7. Select “jcepopup” from the Class List drop down
  8. Click Save

IMPORTANT NOTE: If you are embedding an article within a lightbox, the article should not include any email address links in it. For example if you have within your article a link to email@email.com you should replace that with email[at]email.com and keep it unlinked. 

Have more questions? Submit a request
Article is closed for comments.