icon Slimbox2
Created by Orckestra

How to display images with Slimbox2

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 

How to display a gallery from the Media Archive

  1. Edit a page.
  2. Insert:
    1. the "Single image in a slim lightbox" component (Components / Media),
    2. or the Orckestra.Media.ImageGallery.Slimbox2 function ( Insert | Function),
    3. or the following code:
        Expand code
  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 when using the function above.
  4. If needed, specify the optional parameters (if available):
    • 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).

You can also make use and the ad-hoc Orckestra.Media.ImageGallery.Slimbox2.Image function.

How to display 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 Image parameter will be used.

You can also make use and the ad-hoc Orckestra.Media.ImageGallery.Slimbox2.Gallery function.

How to display 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 the Orckestra.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:
Expand code

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

Important Notes

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