Lightbox Application
Version 34.1 by Thomas Mortagne on 2011/10/27 19:24
 | Allows to overlay images on the current page |
| Type | application |
| Category | |
| Developed by | Elena-Oana Tabaranu |
| Rating | |
| License | GNU Lesser General Public License 2.1 |
Table of contents
Description
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>
<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
- visit XWiki.LightboxTest to verify.
