Adding Lightbox to Flash

Posted by snowcat

2009 2010

Follow these steps to add Lightbox functionality to Flash files:

Step 1. First, download Lightbox++

Step 2. Copy the css, images and js folders from the archive in the same folder with your HTML file on your web server. This HTML file should embed the SWF file to which you want to add the Lightbox to.

Step 3. Edit the HTML file and add these lines in the section:

1. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
2. <script src="js/prototype.js" type="text/javascript"script>
3. <script src="js/scriptaculous.js?load=effects" type="text/javascript"script>
4. <script src="js/lightbox++.js" type="text/javascript"script>

Step 4 (option A). If you want to have a Lightbox Image Set (with Next and Previous buttons), right after the lines from Step 3 add these lines, otherwise go to Step 4 (option B)

1. <script type="text/javascript">
2. function GroupDelegate(id) {
3. var objLink = document.getElementById(id);
4. Lightbox.prototype.start(objLink);
5. }
6. script>

In the body of your HTML file you’ll have to add invisible links to the images which will be displayed in the Lightbox, like this:

1. <a id="img1" title="First image" rel="lightbox[img]" href="images/01.jpg"a>
2. <a id="img2" title="Second image" rel="lightbox[img]" href="images/02.jpg"a>
3. …

Step 4 (option B). If you intend to have a single image display in Lightbox (as opposed to option A with Image set) you simply have to add these lines into the section of the HTML file:

1. <script type="text/javascript">
2. function LightboxDelegate(url,caption) {
3. var objLink = document.createElement('a');
4. objLink.setAttribute('href',url);
5. objLink.setAttribute('rel','lightbox');
6. objLink.setAttribute('title',caption);
7. Lightbox.prototype.start(objLink);
8. }
9. script>

Step 5 (option A). If you’re using SWFObject to embed the SWF, make sure you’re having these two params (in addition to maybe other params):

1. params.wmode = "transparent";
2. params.allowscriptaccess = "samedomain";

Step 5 (option B). If you’re using tags to embed the SWF file, add these lines:

1. <param name="allowscriptaccess" value="samedomain">
2. <param name="wmode" value="transparent">

And in the embed tag you must insert the attribute:

1. wmode="transparent"

Step 6. If the links to go to when clicking an image are specified through the XML file, the url attribute must be set like this:
1. For Step 4 (option A):

1. url="javascript:GroupDelegate('img1')"

2. For Step 4 (option B):

1. url="javascript:LightboxDelegate('images/01.jpg','First Image')"

Note that the Lightbox will not work if tested locally. You’ll have to test it on a HTTP server.

An working example of Lightbox implemented in the way described above you will see in the “index-with-lightbox.html” file from these two archives: dockmenu.zip and carousel.zip files