Lightbox Application

Lightbox Application

The Lightbox Application allows you to overlay images on the current page. It's a snap to setup and works on all modern browsers.

Usage

Once you have installed the application, add the following line into your wiki editor. This will allow you to use the CSS and JavaScript code for the Lightbox as skin extensions.

{{include document="XWiki.Lightbox"/}}

Examples

Single Images

Add a rel="lightbox" attribute to any link tag to activate the Lightbox. For example:

<a href="$doc.getAttachmentURL('xeblog.jpg')" rel="lightbox" title="test caption"><img src="$doc.getAttachmentURL('xeblog.jpg')" width="250" height = "200"/></a>

When clicking on your image you will get a similar Lightbox:

Image Set

If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

<a href="$doc.getAttachmentURL('installstep.jpg')" rel="lightbox[my-gallery]" title="test caption"><img src="$doc.getAttachmentURL('installstep2.jpg')" width="125" height = "100"/></a>
<a href="$doc.getAttachmentURL('xeblog.jpg')" rel="lightbox[my-gallery]" title="test caption"><img src="$doc.getAttachmentURL('xeblog.jpg')" width="125" height = "100"/></a>

When clicking on your image you will get a similar Lightbox that allows you to navigate between the group images: