Skip Ribbon Commands
Skip to main content
Navigate Up
Sign In

Photo Lightbox Effect

Article ID: ITSKB-3-204

Article Purpose

This article will show you how to add a image lightbox for images to any CommonSpot CMS page. Lightboxes are popup windows that load within a page, fading all items behind them. They are perfect for showing off images as they make them 'pop' off the page and increase their vibrancy. This is an intermediate tutorial.

Needed Materials

Steps to Resolution

  1. Log in and Work on a CMS page
  2. Click the "Gear Icon" of the Formatted Text Block you want the image to appear
  3. Click "Text"
    1. This brings up the "Formatted Text Block dialog"
    2. "Left click (Place your cursor)" where you want your image to appear
    3. Click the "Image Icon" in the toolbar of the Rich Text Editor
    4. "Add your thumbnail image"
    5. "Add a link" to the thumbnail image going to the larger image
    6. Select the "Anchor" tag in the property inspector of the Rich Text Editor
    7. Select the "fancybox" style from the CSS Style dropdown beside the format dropdown
    8. "Add a caption" to the lightbox image by enter text into the Anchor's Title field in property inspector 
    9. Click "Save"
  4. "Submit" your page when you are finished

Now when you preview your page you can click the thubnail image to see the larger image in the lightbox

Additional Information

Did this article answer your question?

Related Reading


For additional assistance Contact the IT Call Center at 786-4646.