About
This is a slightly modified version of Lokesh Dhakar's excellent Lightbox2, and thus the description for Lightbox2 applies:
“Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.”
The original Lightbox2 was modified as little as possible (a few lines of JS, no CSS),
just enough to add one feature that I personally missed from all the lightbox -type solutions
I've looked at: direct linking.
Lightboxd allows you to provide a direct link to an image on the page, and when the link is followed, the image is opened in the lightbox.
Also, when someone browses trough the images in your lightbox gallery, the browser location updated to show the direct link to the current image.
License
Licensed under the Creative Commons Attribution 2.5 License, just as Lightbox2. If you like it, the original author of Lightbox2 is accepting donations...
How it works
Lightboxd works exactly as the original
Lightbox2,
except that if the <A> -tag has a name="" -attribute,
the direct-linking feature is activated.
A modified example from the Lightbox2 site:
<a href="images/img1.jpg" name="img1" rel="lightbox[roadtrip]">image 1</a>
<a href="images/img2.jpg" name="img2" rel="lightbox[roadtrip]">image 2</a>
<a href="images/img3.jpg" name="img3" rel="lightbox[roadtrip]">image 3</a>
You can direct-link to the first image by using the name -attribute, exactly as
<A> -links normally work: http://yoursite.com/yourgallery#img1
will open image 1 in the lightbox. And if the user moves on to the next image, the browser
location is updated to http://yoursite.com/yourgallery#img2.
Make it so
In short: get Lightboxd instead of Lightbox2, then follow the Lightbox2 instructions, then add a
name="some unique name" for each image you want direct-linkable.
Let's break it down:
- Get Lightboxd.
- Lightbox needs Prototype and Scriptaculous+Effects; get protopacked (find protoculous-effects-packer.js in the zip)
- In the <HEAD> of your html, do:
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen"/>
<script src="protoculous-effects-packer.js" type="text/javascript"></script>
<script src="lightboxd.js" type="text/javascript"></script>
- Make sure the next/prev/close -images in lightbox.css and lightboxd.js point to your images of choice.
- Setup the image links, basically:
<a href="img1.jpg" name="img1" rel="lightbox[set1]">image 1</a>
<a href="img2.jpg" name="img2" rel="lightbox[set1]">image 2</a>
...
<a href="imgN.jpg" name="imgN" rel="lightbox[set1]">image N</a>
Example
(watch the browser location change)
