This evening I will be showing you how to execute my Lightbox++ script from a Flash movie. You’re not only limited to Lightbox++, as you can use this tutorial with any Lightbox scripts based on Lokesh Dhakars Lightbox class. How is it done? Simple really. We setup something similar to what .NET programmers refer to as a Delegate. This will all be explained in a minute, so lets begin.

We’re going to assume at this point you already have a web document with Lightbox++ or a Lightbox style script installed. If you haven’t done this already, you can read the installation documentation for Lightbox++ by clicking here - Lightbox++

Example

Awesome, so what do I need to do?

First, you’ll need to insert the following javascript function between the head tags of your document.

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
   function LightboxDelegate(url,caption) {
   var objLink = document.createElement('a');
   objLink.setAttribute('href',url);
   objLink.setAttribute('rel','lightbox');
   objLink.setAttribute('title',caption);
   Lightbox.prototype.start(objLink);
}
</script>

Now if you’ve followed my previous post, regarding calling javascript functions via Flash this next step is a snap. You’re going to be using the getURL command in Flash, to call the javascript function that you’ve just pasted into your document above. So, somewhere in your Flash movie you’re going to have something similar to the following:

1

getURL("javascript:LightboxDelegate('images/green_enl.jpg','Green Wallpaper')");

This is some sample code taken from the example Flash video above. You’ll notice that we’re calling our LightboxDelegate function, and are specifying two arguments. The first argument is the URL to the image or movie (if using Lightbox++) in which you wish to display. The second argument is simply a caption, in which you can set to whatever you would like.

Next you will need to embed your Flash movie into your document that has your Lightbox script installed. In your object tags, you’re going to need to specify the following params:

1
2

<param name="allowscriptaccess" value="samedomain">  
<param name="wmode" value="transparent">

In your embed tag you’re going to need to insert the following attribute:

1

wmode="transparent"

The wmode parameter and attribute allows the Lightbox to appear over the Flash movie. The allowscriptaccess param allows the Flash movie to speak with our Delegate, and we’re using the “samedomain” value to offer up a little bit of security.

You’re done, enjoy your new found skills. Stay tuned for my next post, which will be showing you how to execute Lightbox scripts from you favorite slideshows, namely SlideShowPro and Monoslideshow.

Download Example

If you wish to download an example to go with todays tutorial you may do so here - Download Example

NOTE: You will need to upload this example to your hosting service for it to work correctly.