Colorbox

Colorbox is a lightbox implemented in javascript. It shows a slideshow or a single enlarged image within the current browser window. I.e. you insert a thumbnail image and when the user clicks on it it will be shown in full size (or whatever fits into the browser window).

Enable it

To enable it in the first place, check "UseColorbox" on the Colorbox tab

Single-image use (you don't need to do anything)

Insert an image, using the scaling functionality of Silverstripe (i.e. choose the original size image, and resize it using the width and/or height controls in the right hand taskpane). 

This image for example has been resized to 300px, does have some title text (will be shown in the popup as well). So just insert it, and when the global "useColorbox" setting is enabled, you'll get colorbox-treatment automatically)

Grouping of images, to create a slideshow group (surround with div or p of class "colorbox")

To create multiple images, that can be shown in slideshow mode (i.e. you can use <left>/<right> arrow keys, or buttons and click on the image to go to the next/previous images in the set, surround the images with a div of class colorbox, i.e. <div class="colorbox">[every image will belong to one group]</div> <div class="colorbox>[images in a different div will belong to a different group]</div>. You can also use paragraph with class colorbox, in the same manner.

An example of four grouped images (surrounded with div)

 

Another group, in a separate p with class div (i.e. each container with class="colorbox" will be a separate group)

Todo

Add css rules to automatically create a link, as this now only works with javascript enabled.