Lightbox

Overview

The Lightbox creates a pop-up window which contains content held in a TexttoFullWidth page.

Example

Lightbox example before pressing the link

Lightbox example before pressing the link

Lightbox example after pressing the link

Lightbox example after pressing the link

WCMS use

Lightbox 'page'

The Lightbox (the element that will pop up) needs to

  • be a TextToFullWidth page
  • be added as a child page of hte page that will link to the Lightbox
  • include some special HTML code in the Rich Text Editor

Right click your parent page and choose Insert and then press Insert from template. Expand Page Templates and highlight HCC_TextToFullWidth. Press Insert.

In Text areas, scroll down to Eight columns block and press Show editor. Use the Rich Text Editor to add your text, links and / or images to the page that will be the Lightbox.

The Lightbox can have any Sitecore features on it such as images or Call to action buttons but be mindful of how you want it to be displayed. This is because the Lightbox will be smaller than an average page. A good example can be found by selecting abseiling on the Hampshire Outdoor Centre activities page.

The link that will point to this Lightbox will need some HTML code.

HTML code

For both the parent page and the child Lightbox page, in Content Editor find the field CustomScripts in Page specific scripts. Select the drop down field and choose JS/resourcelist-colorbox.

Code used for lightbox feature

In the link that will point to the lightbox 'page' include the HTML code class="colorbox-pop-up cboxElement" in the <p> tag.

The link can be inside a text block or other common-content element but it must sit somewhere on the parent page for the Lightbox to work

Colorbox code example

MVC.net use
Code
Version and status
  • current version
  • Concept