 | The Lightbox Application allows you to overlay images on the current page. It's a snap to setup and works on all modern browsers. |
| Type | application |
| Category | |
| Developed by | Unknown |
| Rating | |
| License | Unknown |
Table of contents
Description
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>
<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:
Prerequisites & Installation Instructions
Import the xar file and visit XWiki.LightboxTest to verify.
