Execute Lightbox Scripts From Flash

[kml_flashembed movie="http://blog.unstaticinaction.com/images/Revolt.swf" height="300" width="400" wmode="transparent" allowscriptaccess="samedomain"/]

UPDATE: Source code HERE
This is the first tutorial here.
It shows how to integrate flash and Lightbox, mainly how to execute Lightbox from the flash application.
The flash carusel above is only an example of small widget for you website.
Actually we will use Lightbox++, which lets you also create flash gallery not only images. There are 2 extra libraries you need : Prototype Framework and Scriptaculous Effects Library. Generic tutorial is on blog.codefidelity.com.

Anyway, lets start:

First step you need to do is including required libriaries and css files into you page:

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

Perhaps you will need to modify paths to gfx inside the lightbox.css and lightbox++.js files.

In the second step you need to create delegate javascript functions, somewhere in you html code.

<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>
<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>
<script type="text/javascript">

      function GroupDelegate(id) {

        var objLink = document.getElementById(id);

        Lightbox.prototype.start(objLink);

        }

</script>

LightboxDelegate will open single image in the lightbox, GroupDelegate initiate lightbox group preview and the SWFDelegate opens flash movie in the lightbox.
LightboxDelegate and SWFDelegate takes image or swf path as a parameter so you can directly call them from flash:

var url:String="javascript:LightboxDelegate('images/xxx.jpg','your title');void(0);";
addEventListener(MouseEvent.CLICK,function goto(e:MouseEvent){navigateToURL(new URLRequest(url),"_self");});

or

var url:String="javascript:SWFDelegate('images/xxx.swf','200','200','your title');void(0);";
addEventListener(MouseEvent.CLICK,function goto(e:MouseEvent){navigateToURL(new URLRequest(url),"_self");});

In SWFDelegate you have to provide movie width and height.

Last function , GroupDelegate works in the same way:

var url:String="javascript:GroupDelegate('some_id_XX','you title');void(0);";
addEventListener(MouseEvent.CLICK,function goto(e:MouseEvent){navigateToURL(new URLRequest(url),"_self");});

Instead of path to image or movie you give the id of specific HTML element.
This elements will contain paths to our lightbox group

<a id="some_id_00" href="0.jpg" rel="lightbox[our_group]" title="00"></a>
<a id="some_id_01" href="1.jpg" rel="lightbox[our_group]" title="01"></a>
<a id="some_id_02" href="2.jpg" rel="lightbox[our_group]" title="02"></a>

That’s all, more information and full tutorial you can find on blog.codefidelity.com