The LVSYS platform provides a built-in functionality for adding a light box. A lightbox is a javascript component that opens up images in their own popup.

This article assumes the reader is familiar with HTML and Javascript.

1. Include the lightbox javascript file

The lightbox functionality is delivered by loading the following like of code:

<script type="text/javascript" src="/plugin/fancybox/lvsys.plugin.lightbox.1.0.1.js"></script>

This script will load the necessary components, and will attach itself to the proper html elements

You can include this file in one of the following areas:

  1. Within your website's global meta head section, found in All Tasks > Global Settings > Page Settings > Meta Head
  2. At the top of the API Script if your templates have one. You can find the API Script in All Tasks > Html > Scripts.
  3. Within the template manager, in the HTML component of the article, product, event or whatever component

The methods 1 or 2 above are strongly recommended. The lightbox plugin will not load any javascript if it can't find an element of id "ui-lightbox".

The third method can be used but you are increasing risks of getting the file included twice.

2. Surround your images with an element of id "ui-lightbox" 

The lightbox plugin will harvest all images found within the element of id ui-lightbox.

Here are some common uses:

<div id="ui-lightbox">
@slideshow@
</div>

<div id="ui-lightbox">
@body@
</div>

3. There can only be one ui-lightbox element on your page.

The lightbox plugin does not support multiple lightboxes of the same page - as they will conflict with each other.

4. Shadows and corners are not displaying correctly. What did I do wrong?

Nothing - but you may need to modify or add the CSS rule below - usually located at the top of "Default.css" in All Tasks > Web Site > CSS Stylesheet:

/* fix  lightbox issues by swapping box model to content-box */
#fancybox-title-inside { overflow-y: scroll; max-height: 100px; }
#fancybox-wrap { padding: 0 !important; }
#fancybox-wrap * {box-sizing: content-box !important; -moz-box-sizing: content-box !important;}