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 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.
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
- MVC.net use
- Code
- Version and status
-
- current version
- Concept
