Lightbox++
So, What is it?
I’m sure most of you know Lokesh Dhakars Lightbox script by now, and if you don’t you can see it here - huddletogether.com. 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.
If it’s so great, why did you modify it?
Well, I’ve used this excellent script on many of my different design projects. At some point I was asked if one could display Flash movies inside a Lightbox and unfortunately the script didn’t have that capability.
SWFBox Was Born
Bordem and a few late nights, I set out to add Flash capability to this script. The first iteration dubbed SWFBox, worked but fell short do to compatability problems with Mac browsers. Another issue was, SWFBox didn’t leave support for displaying your regular imagery, only Flash elements. Many comments and questions followed, and at some point I lost the time and drive to figure out what exactly was causing problems with the Mac clients.
Say Hello to Lightbox++
After some careful debugging and research, I was able to pin down the problems with the Mac clients, so I set out again to try and put this to bed. Tonight, I would like to introduce to you Lightbox++. The browser compatibility problems should be resolved, and the script now retains the ability to use regular Lightbox functionality, with the added ability to embed your Flash videos.
Examples
Single Image
Image Set
Flash Movie
Installation
You install Lightbox++ in the same way that you install the regular flavor of Lightbox. There are a few caveats to installing Lightbox++ over the regular script, so even if you’re a seasoned installer, you should read below.
First, you’re going to need to link the Prototype Framework, Scriptaculous Effects Library and your Lightbox CSS file (all included with Lightbox++) in the header of your document.
1 2 3 4 | <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script> <script src="js/lightbox++.js" type="text/javascript"></script> <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /> |
At this point you’ve successfully linked Lightbox++ to your document. You should make sure that any links to the images you have in your CSS document and the Lightbox++ file, are in the proper locations. Now, all you have to do is activate Lightbox and I’ll give you 3 examples below.
If you wish to use the script on a single image, your links should look something like the following:
1 | <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> |
If you wish to use the script on a group of images, your links should look something like the following:
1 2 3 | <a href="images/image-1.jpg" rel="lightbox[group]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[group]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[group]">image #3</a> |
And lastly, if you wish to use a Flash video your links should look something like this:
1 | <a href="movies/mymovie.swf" rel="lightbox" width="500" height="450">My Movie</a> |
For starters you’ll notice that you’re adding rel=”lightbox” to all of your links to let the script know that you wish to pop a lightbox with said link. You’ll also notice that you can use the title attribute in your links to add captions. Pay attention here, in regards to Flash videos. You have to specify the width and height attributes in your link to let the script know the dimensions of your movie. If you fail to do so, you’re more than likely going to end up with javascript errors and the script will fail.
A few notes…
Here are a couple of things you should know. If you wish to use your Flash videos in a group you may do so, but if users are to interact with your Flash videos instead of simply watching them then you’re going to run into a problem. If you set the z-index of the hoverNav element to be above your Flash videos, the previous and next links will be above your videos not allowing you to interact with them. I’ve yet to find a work around for that at this point, but I’m all ears if someone finds a solution. I’ve also had success displaying FLV videos using this script. The only thing I’ve found is that if your FLV is using an external control set (like the MediaPlayBack component found in Flash) that the FLV and the external controls need to be in the same directory as your HTML document. I’ll elaborate on this further after I do some more testing.
