Display your images in a slim lightbox

Composite.Media.ImageGallery.SlimBox2 displays a gallery of images on a page using Slimbox 2 , a highly customizable gallery/showcase plugin for jQuery and a lightweight visual clone to Lightbox 2.

How to implement

You have 3 options of displaying images:

  • a gallery of image from the Media Archive
  • a single image from the Media Archive
  • a single image inserted manually 

Displaying a gallery from the Media Archive

  1. Edit a page.
  2. Insert the Composite.Media.ImageGallery.Slimbox2 function ( Insert | Function), or add the following code: 
     
<f:function name="Composite.Media.ImageGallery.Slimbox2" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <f:param name="MediaFolder" value="MediaArchive:89d87b11-8c3f-4e5c-9a10-5d1f12d21397" /> 
  <f:param name="ThumbnailMaxWidth" value="128" /> 
  <f:param name="ThumbnailMaxHeight" value="128" /> 
  <f:param name="ImageMaxWidth" value="640" /> 
  <f:param name="ImageMaxHeight" value="500" /> 
  <f:param name="AutoSquareThumbnails" value="False" /> 
  <f:param name="DownloadLinkText" value="Download this image" /> 
</f:function>
  3. In the Media Folder parameter, select the media folder with the images you want to display as a gallery. (The above sample uses a dummy value.). Do not set the Media Image parameter.
  4. If needed, specify the optional parameters:
    • Thumbnail Max Width: The maximum width of a thumbnail in the gallery (128 by default).
    • Thumbnail Max Height: The maximum height of a thumbnail in the gallery (128 by default).
    • Image Max Width: The maximum width of an image when viewed in a lightbox (640 by default).
    • Image Max Height: The maximum height of an image when viewed in a lightbox (500 by default).
    • Auto Square Thumbnails: When true, the thumbnails images are always presented as squares (x==y) (false by default)
    • Download Link Text: When the text is specified, a link to the image with this text (e.g. "Download this image") is added to the slimbox (no link/text by default).

Displaying a single image from the Media Archive

To display a single image from the Media Archive, repeat the above steps (for displaying a gallery). But in Step 3, set the Media Image parameter instead and do not set the Media Folder parameter.

Please not that if you set both the Media Image and Media Folder parameters, the Media Folder parameter will be used.

Displaying a single image inserted manually

If you have one or more images inserted manually on a page (e.g. via the menu Insert | Image) from the Media Archive as an image URL (<img src="(image source)"/>) from the website or an external source, you can also display it with in a "Slimbox".

  1. Insert thethe Composite.Media.ImageGallery.Slimbox2 function on a page (or a page layout template) without specifying any parameters. (This will only add required links to JS's and CSS's to the head of the page.)
  2. Switch to the Source View of the page.
  3. Wrap the <img/> element in <a href="" ></a> and specify these attributes in <a href="" >:
  • href: the image's relative or absolute URL (e.g. "/Frontend/Images/1.jpg")
  • rel="lightbox"
  • title: the title of the link (e.g. "My super photo")

For example:

 
<a href="images/image-1.jpg" rel="lightbox" title="my image"> 
  <img src="images/image-1.jpg" width="200" /> 
</a>

You should also consider setting the sizes of the inserted image.

Important Notes

  1. Set the Media Folder parameter to display a gallery of images from a folder in the Media Archive.
  2. Set the Media Image parameter to display asingle image from the Media Archive.
  3. Do not set parameters on the function if you wnat to display manually inserted images.
  4. If you set both the Media Image and Media Folder parameters, the Media Folder parameter will be only used.

Requirements

Composite C1 version 2.0 or later

SHARE