Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers.
How to use
Part 1 - Setup
<script src="/addons/lightbox2/js/jquery-1.7.2.min.js"></script><script src="/addons/lightbox2/js/lightbox.js"></script>
Include the Lightbox CSS file by adding the following line into your
<link href="/addons/lightbox2/css/lightbox.css" rel="stylesheet" />
Part 2 - Activate
rel="lightbox"attribute to any link tag to activate Lightbox.
Optional: Use the
<a href="/addons/lightbox2/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
titleattribute if you want to show a caption.
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.
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!
<a href="/addons/lightbox/images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="/addons/lightbox2/images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="/addons/lightbox2/images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>