Lightbox 2 with Flash

Posted under » Flash » JavaScript on 13 March 2009

This is a workaround of making Lightbox work with Flash.

First of all, you have to understand that Lightbox is Javascript and not Flash. HTML works in some way in Flash but only for text formatting purpose with HREF support.

Codefidelity has came out with Lightbox++ to solve this problem but I find it not practical in some cases where you have to stick to HTML and very minimal Javascript to trigger Lightbox like how it is suppose to be. It is also my wish to stick to the original Lightbox rather than going for some mod. Doesn't matter which version but it just works without much tinkering and very minimal effort. Sounds great? So lets get into it.

Here is what I did to overcome the issue.

Put a HTML with CSS div layer with absolute positioning on top of flash.

Unfortunately, you have to tweak your HTML Flash embed tag with WMODE because by default, Flash will appear on top most layer of the page. You can have a flash with menu and animation running at the background. Most people would not know you are using HTML.

The second step is to show and hide the HTML layer as and when necessary using the hide or show javascript. For this we use javascript triggered through Flash.

Did I go too fast? Ok here are the steps again.

1. Put the CSS with absolute positioning.

2. Put the WMODE tag on your Flash embedding or CSS layer will not show.

3. Put the hide or show javascript on the header.

4. Put the html primed with CSS, Javascript hide or show and the Lightbox tag on the HREF.


image #1

5. Right now, you are not able to see the CSS layer unless you trigger the javascript : showstuff using flash. So you have to put this somewhere on your AS2 flash script.

getURL("javascript:showStuff(layer1);");

6. When you want to move away from the Flash scene or frame, put this to hide the HTML CSS layer.

getURL("javascript:hideStuff(layer1);");

If you have any comments, please leave them here.