flashLightBoxInjector – Start Lightbox from Flash

Overview



What is flashLightBoxInjector?

flashLightBoxInjector is a PrototypeJS class that bridges the gap between Flash and Lightbox2. Not only does flashLightBoxInjector let you start an already existing Lightbox driven gallery (viz. static HTML), it also lets you dynamically build a list of images to show through Lightbox (viz. inject the needed HTML from within Flash).

flashLightBoxInjector

Imagine a Flash movie loading a set of images from Flickr, showing all thumbnails. A click on the thumbnail will then fire up Lightbox to show that image (within its set). This is where flashLightBoxInjector jumps in: after having loaded the images into your Flash file it automagically injects the needed HTML code into the current HTML document and then lets Lightbox know that this new set of images was included, enabling Lightbox to show them. And all this with the ease of a few calls made through Flash's proprietary ExternalInterface object. (See demo)

Looking for a version that works with ShadowBox instead of Lightbox? Head over to the PictureFlow project page and download the latest version in order to lay hands on flashShadowboxInjector.

top



Alternative (non-Flash) implementations of flashLightBoxInjector

The great thing about flashLightBoxInjector is that its usage is not limited to Flash only, as the JavaScript can be called from anywhere you like

flashLightBoxInjector Alternative Usage

Imagine a website where you have a dropdown to select an image from and after a click on a button, Lightbox2 shows the selected image. Yes, flashLightBoxInjector can be used for this purpose. (See demo2)

top



Demos



Download

The download of flashLightBoxInjector includes a full example, including Flash Sources.

In order for this to work with Lightbox 2.0.4 (released 2008.03.09), you'll need to make 1 tiny change to the lightbox.js file! Versions 2.0.x predating 2.0.4 will work “out of the box”

Latest Version

Old, Archived Versions

NOTE: it is advised that you use the latest version!

Don't forget to read the License & usage and Installation/Configuration blocks on this page! ;)

top



Version History

Version 1.2 - 2007.11.22

  • [add] Added a prependElement function
  • [add] Added a new, more impressive, example (Flash Polaroid Photo Gallery)

Version 1.1 - 2007.08.03

  • [fix] Array passed into flashLightBoxInjector appeared reversed in Lightbox2

Version 1.0 - 2007.07.27 - * INITIAL RELEASE *

  • Small coding of class, flash example, documentation, etc. resulting in a first release.

top


License & usage

The script is released under a creative commons Attribution-ShareAlike 2.5 license. Should you use the script within a commercial context please think about clicking the PayPal donate button.

top


Installation/Configuration

In order for this to work with Lightbox 2.0.4 (released 2008.03.09), you'll need to make 1 tiny change to the lightbox.js file! Versions 2.0.x predating 2.0.4 will work “out of the box”

  1. Make sure you've set up Lightbox2 correctly.
  2. Include flashLightBoxInjector.js in your HTML head section, underneath the Lightbox2 references:
    HTML:
    1. <script type="text/javascript" src="js/flashLightBoxInjector.js"></script>
  3. That's it, you're done!

top


Static Code Example

If you already have a set of links in your HTML, only a minor change is needed: each element must be given an id.

HTML:
  1. <a href="images/image-1.jpg" rel="lightbox[roadtrip]" id="roadtripImage1">image #1</a>
  2. <a href="images/image-2.jpg" rel="lightbox[roadtrip]" id="roadtripImage2">image #2</a>
  3. <a href="images/image-3.jpg" rel="lightbox[roadtrip]" id="roadtripImage3">image #3</a>

From within Flash then call myFlashLightBoxInjector.start through ExternalInterface along with the id of the linked picture as parameter. If you'd want to show the second picture, then you'd be using this piece of code:

Actionscript:
  1. import flash.external.*;
  2.  
  3. btnShowImage.onRelease = function() {
  4.     ExternalInterface.call("myFlashLightBoxInjector.start", "roadTripImage2");
  5. }

top


Dynamic Code Example (Step-by-step example)

Imagine that you've pulled an XML file from Flickr containing a set of pictures and that you've loaded all thumbnails into Flash. flashLightBoxInjector provides you the option to automatically generate the needed HTML, so that Lightbox has knowledge of that gallery. Here's what you have to do:

Before going through the steps needed, it's needed for you to know that flashLightBoxInjector automatically creates a div-element with the id flashLightBoxInjectionBox where it will store the HTML needed for Lightbox.

If you have a robust knowledge of coding Flash/Javascript, then you might want to skip this example, and immediately go to the All-in-one example

First you have to import flash.external.* in your Flash file, enabling javascript calls from within flash, the proper way

Actionscript:
  1. import flash.external.*;

(yes, we could use getUrl("javascript:...") to call javascript functions, but that cannot be trusted 100%)

  1. First call a myFlashLightBoxInjector.reset() from within Flash, this will clear the contents of flashLightBoxInjectionBox if you don't want previously injected elements to appear in the same set (when using the same set ID):
    Actionscript:
    1. ExternalInterface.call("myFlashLightBoxInjector.reset");
  2. While looping through your set of images within Flash (and placing a thumbnail version of the image onto the Stage for example), call a myFlashLightBoxInjector.appendElement for each image:

    Actionscript:
    1. ExternalInterface.call("myFlashLightBoxInjector.appendElement", linkToTheImage + "", titleOfTheImage + "", uniqueIdOfTheImage + "", nameOfTheSet + "");

    Note that I'm appending an empty string to each parameter (viz. implicit casting to String), as Flash otherwise tends to freeze due to some weird reason.

    Don't forget to hook an onRelease event to the thumbnail you've placed onto the Stage, which will call the myFlashLightBoxInjector.start function

    Actionscript:
    1. ExternalInterface.call("myFlashLightBoxInjector.start", uniqueIdOfTheImage + "");
  3. After you have looped throuh all of your images, call a myFlashLightBoxInjector.updateImageList, so that Lightbox will know of the newly injected set
    Actionscript:
    1. ExternalInterface.call("myFlashLightBoxInjector.updateImageList");

That's it, you're done!

If you notice that your images appear in the reverse order in Lightbox than the order you've inserted them in your Flash File, then use prependElement instead of appendElement in the code above (Requires fLBI 1.2)

top


Dynamic Code Example (All-in-one example)

A full piece of code might look like this (full workout in example included in the download)

Actionscript:
  1. function attachImagesToStage(photoArray:Array):Void {
  2.  
  3.     // reset myFlashLightBoxInjector
  4.     ExternalInterface.call("myFlashLightBoxInjector.reset");
  5.    
  6.     // loop photoArray
  7.     for (i=0; i <photoArray.length; i++) {
  8.  
  9.         // attach new MC to Stage
  10.         var mc:MovieClip = this.attachMovie("photoFrame", "photoFrame" + photoArray[i].id, _root.getNextHighestDepth());
  11.  
  12.         // add image to MC, set x and y coordinates, etc.
  13.         mc.loadImage(photoArray[i].thumb);
  14.         mc._x       = ((mc._width * (i+1)) - (mc._width / 2));
  15.         mc._y         = 25 + Math.round((Stage.height - (mc._height*2)) * Math.random());
  16.         mc._rotation    = 30 - (60 * Math.random());
  17.        
  18.         // append element in DOM through myFlashLightBoxInjector.appendElement
  19.         ExternalInterface.call("myFlashLightBoxInjector.appendElement", photoArray[i].url + "", photoArray[i].desc + "", "photoFrame" + photoArray[i].id + "", "mySetOfImages");
  20.        
  21.         // hook onRelease event
  22.         mc.onRelease = function() {
  23.             // show Lightbox with this image
  24.             ExternalInterface.call("myFlashLightBoxInjector.start", this._name + "");
  25.         }
  26.  
  27.     }
  28.    
  29.     // let Lightbox know stuff has changed
  30.     ExternalInterface.call("myFlashLightBoxInjector.updateImageList");
  31.  
  32. }

Now build an array of the images you wish the load, each entry having an id, url and desc property and pass that array through the function.

Actionscript:
  1. attachImagesToStage(myArray);

top


Feedback/Help/Support

One can always leave a comment in case any questions should arise or if a bug were to be found; and one can always support me by donating me a tidbit to my paypal ;)

top


Make a donation

It certainly is no obligation but it would most certainly put a smile on my face ;) Alternatively you can support me by clicking one of the ads below.

Advertisements

Spread the word!

  • del.icio.us
  • digg
  • Ma.gnolia

About this Page

Best of Bram.us