Since the first thread showing you how to execute Lightbox scripts from Flash was such a big hit, I decided to write another showing you how to gain even more functionality in this regard. Tonight I will be showing you how to initiate a Lightbox containing a Flash movie from a Flash movie, and how to initiate Lightbox groups containing images as well as Flash movies. All of the following scripts can be used in the same page if you wish, you just need to include all of the following delegates into your project.more info http://blog.codefidelity.com/?p=18

Initiating a Flash Lightbox from Flash

If you followed the previous thread, this should be a pretty straight forward process. All that really needs to be done is a few edits to your LightboxDelegate, and your getURL functions.

Example

Usage

The following code should be placed within your head tags, or linked via an external javascript file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

If you’ve used the following bit of script before, you’ll notice a few changes. Since Lightbox++ requires you specify the width and the height of the Flash movie in your URLs, we’ve added the width and height arguments to our script. Now all that is left to do, is change our getURL functions around a little bit. They should now look something like the following:

1

getURL("javascript:SWFDelegate('images/sbemail.swf','550','400','Strongbad: Coloring');");

You’re now specifying the width and the height in your getURL functions, to match the signature of our javascript method. Remember, you must specify the arguments in the correct order: URL, width, height, and caption.

Initiating a Lightbox Image Group via Flash

I received quite a few e-mails and comments in regards to how this might be done. I did a little tinkering to get it to work properly, and if you follow along it shouldn’t be that difficult for you.

Example

Usage

The following code should be placed within your head tags, or linked via an external javascript file:

1
2
3
4
5
6

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

The first thing you’re going to need to do is create links in your document just like you’re used to. The only difference is you’re going to be specifying an Id attribute in your links, which I will explain a bit more in a minute. The links in my document, that pertain to the above example look like this:

1
2
3

<a id="paper1" href="images/blue_enl.jpg" rel="lightbox[papers]" title="Wallpapers: Blue"></a>
<a id="paper2" href="images/green_enl.jpg" rel="lightbox[papers]" title="Wallpapers: Green"></a>
<a id="paper3" href="images/orange_enl.jpg" rel="lightbox[papers]" title="Wallpapers: Orange"></a>

These links go right into your document that has your Flash movie in it. You’ll notice we don’t have any text between our link tags, which keeps our links from showing up in the page. The Id attribute can be named anything you wish, but you’ll need to remember them because they’re important for our getURL function calls in the next step. In my Flash example movie, my getURL calls look like the following:

1
2
3

getURL("javascript:GroupDelegate('paper1')");
getURL("javascript:GroupDelegate('paper2')");
getURL("javascript:GroupDelegate('paper3')");

So when the images are clicked in my example movie above, they call our GroupDelegate function that we defined earlier, and specify the Id of the image we wish to display in our Lightbox first, even though they will be in a group. So to break it down, if the blue image is clicked in my example movie, a getURL function is fired, calling the GroupDelegate function specifying ‘paper1′ as the argument. This argument is the same as the Id attribute in my link that pertains to my blue wallpaper.

Initiating a Lightbox Flash Group via Flash

This is pretty much the same setup as calling image groups from Flash with a few small changes. There is also a gotcha involved with using this method, which I will outline now. I suggest only using this method if the visitor is only supposed to watch the movies that are contained within a group and not interact with them. When in group mode, the Lightbox script’s previous and next links have a z-index that is greater than that of the Flash movies, which keeps the links above the movies, thus not allowing the visitor to interact with your movies. If you want to have the visitor interact with your video, I suggest using the first example in this post which is only a single Flash movie and doesn’t use the previous and next links. If someone has a solution for this, I’m all ears.

Example

Usage

The following code should be placed within your head tags, or linked via an external javascript file:

1
2
3
4
5
6

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

The first thing you’re going to need to do is create links in your document just like you’re used to. The only difference is you’re going to be specifying an Id attribute in your links, which I will explain a bit more in a minute. The links in my document, that pertain to the above example look like this:

1
2
3

<a id="comics" href="images/comics.swf" rel="lightbox[strongbad]" width="550" height="400" title="Strongbad: Comics"></a>
<a id="lookingold" href="images/lookingold.swf" rel="lightbox[strongbad]" width="550" height="400" title="Strongbad: Looking Old??"></a>
<a id="roadtrip" href="images/roadtrip.swf" rel="lightbox[strongbad]" width="550" height="400" title="Strongbad: Road Trip"></a>

These links go right into your document that has your Flash movie in it. You’ll notice we don’t have any text between our link tags, which keeps our links from showing up in the page. The difference from the previous example is that we’re now adding width and height attributes to our links as Lightbox++ requires them. The Id attribute can be named anything you wish, but you’ll need to remember them because they’re important for our getURL function calls in the next step. In my Flash example movie, my getURL calls look like the following:

1
2
3

getURL("javascript:GroupDelegate('comics')");
getURL("javascript:GroupDelegate('lookingold')");
getURL("javascript:GroupDelegate('roadtrip')");

So when the button is clicked in my example movie above, it calls our GroupDelegate function that we defined earlier, and specifies the Id of the Flash movie we wish to display in our Lightbox first, even though they will be in a group. So to break it down, if the button is clicked in my example movie, a getURL function is fired, calling the GroupDelegate function specifying ‘comics’ as the argument. This argument is the same as the Id attribute in my link that pertains to my Strongbad Comic Flash movie.

Initiating Lightbox Scripts From Your Favorite Slideshows

A few of you requested information from my old post showing you how to initiate Lightbox scripts from your slideshow movies–namely SlideShowPro and Monoslideshow. I’m currently working on a post that breaks this entire process down for you, but until then you can check out my old examples. If you’re seasoned in messing with these delegates, you should be able to view source of the examples and pull out the proper delegates and implement them into your projects.

You can find my old examples here – Lightbox Scripts With Your Favorite Slideshows