Image Overlays (Lightbox Effect)

Image overlays allow you to show a larger version of an image in an overlay on the current page instead of causing a new page to load.

While the overlay is displayed, the rest of the page content is darkened (and, in effect, temporarily disabled) to focus the viewer on the overlay.  This feature is commonly referred to as "Lightbox effect."  The SOM Web System is equipped with a simple image overlay that can be applied to any image using the somoverlay class.

  1. Upload the larger version of your image to your website.  There is no need to create a large and a small version of your image.  The web system will create smaller versions of your image that you can use.
  2. Insert your image onto a page using one of the built-in image size presets (thumb, mini, preview, etc.) that is smaller than the image you uploaded. 
  3. To add the overlay feature (requires editing HTML): 
    • While editing the page with the image, click the HTML button on the visual editor.
    • In the source code window that appears, find the correct <img> tag for the image you want to add an overlay to.
    • Add a class called "somoverlay" (i.e. <img class="somoverlay" src="path-to-image" />).
    • Please note that most images will already have a class associated with them that defines the alignment of the image (e.g. image-inline, image-right, image-left). Simply add somoverlay as an additional class (i.e. <img class="image-right somoverlay" src="path-to-image" />).
    • This will make the image a link that when clicked will display the larger version of the image in the overlay style.  See the sample image below.

Aortic Aneursyms

<img class="somoverlay image-inline" src="path-to-image-location" />


This feature is automatically added to all images that are attached to news items, where "click to enlarge" will display the full size image as an overlay.

Note: this feature currently does not apply to images with the Caption checkbox enabled.  This should be available in a future release.