AS3 lightbox and xml

programming flash
1

I am trying to build an xml photo gallery in flash that will use lightbox for viewing large images. I have successfully built the thumbnail portion. My goal is to insert the swf into an HTML page and launch lightbox from the swf. Here is the code:

First I use a Thumbnails class which imports the tweener class

package {
	import flash.display.Sprite;
	import fl.containers.UILoader;
	import caurina.transitions.*;
	import flash.events.MouseEvent;

	public class Thumbnail extends Sprite {
		private var nume:String;
		private var url:String;
		private var id:int;
		private var loader:UILoader;

		function Thumbnail(source:String,itemNr:int,numeThumb:String):void {
			url = source;
			id = itemNr;
			this.nume = numeThumb;
			drawLoader();
			addEventListener(MouseEvent.MOUSE_OVER,onOver);
			addEventListener(MouseEvent.MOUSE_OUT,onOut);
			scaleThumb();
		}
		
		private function drawLoader():void {
			loader = new UILoader();
			loader.source = url;
			loader.mouseEnabled = false;
			loader.x = -50;
			loader.y = -50;
			addChild(loader);

		}
		private function onOver(event:MouseEvent):void {
			Tweener.addTween(this, {scaleX:1,scaleY:1, time:1, transition:"easeoutelastic"});
			Tweener.addTween(this, {alpha:.5, time:1, transition:"easeoutelastic"});
		}
		private function onOut(event:MouseEvent):void {
			Tweener.addTween(this, {scaleX:.9,scaleY:.9, time:1, transition:"easeoutelastic"});
			Tweener.addTween(this, {alpha:1, time:1, transition:"easeoutelastic"});
		}
		private function scaleThumb():void {
			this.scaleX = .9;
			this.scaleY = .9;
			this.alpha = 1;
		}
	}
}

Then I have this code on the actions layer of my fla which loads the thumbnails from an xml file

import fl.containers.UILoader;
import caurina.transitions.*;

//---------loading the external xml file-------
var urlRequest:URLRequest = new URLRequest("pics.xml");
var urlLoader:URLLoader = new URLLoader();
var myXML:XML = new XML();
var xmlList:XMLList;
myXML.ignoreWhitespace = true;
urlLoader.addEventListener(Event.COMPLETE,fileLoaded);
urlLoader.load(urlRequest);
//--------holds the paths to the thumbnails-------
var arrayURL:Array = new Array();
var arrayName:Array = new Array();
//--------holds the thumbnail objects-------
var holderArray:Array = new Array();
//--------represents the number of collumns-------
var nrColumns:uint = 5;
var sprite:Sprite = new Sprite();
addChild(sprite);
var thumb:Thumbnail;
//-------- the thumbnails container-------
var thumbsHolder:Sprite = new Sprite();
sprite.addChild(thumbsHolder);


/* we loop through the xml file
populate the arrayURL, arrayName and position the thumbnalis*/
function fileLoaded(event:Event):void {
	myXML = XML(event.target.data);
	xmlList = myXML.children();
	for (var i:int=0; i<xmlList.length(); i++) {
		var picURL:String = xmlList*.url;
		var picName:String = xmlList*.big_url;
		arrayURL.push(picURL);
		arrayName.push(picName);
		holderArray* = new Thumbnail(arrayURL*,i,arrayName*);
		holderArray*.name = arrayName*;
		holderArray*.buttonMode = true;
		if (i<nrColumns) {
			holderArray*.y = 65;
			holderArray*.x = i*110+65;
		} else {
			holderArray*.y = holderArray[i-nrColumns].y+110;
			holderArray*.x = holderArray[i-nrColumns].x;
		}
		thumbsHolder.addChild(holderArray*);
	}
}

The xml looks like this

<?xml version="1.0" encoding="UTF-8"?>
<images>
	<image>
		<url>thumbnails/ext1.jpg</url>
		<big_url>bigimages/ext1.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext2.jpg</url>
		<big_url>bigimages/ext2.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext3.jpg</url>
		<big_url>bigimages/ext3.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext4.jpg</url>
		<big_url>bigimages/ext4.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext5.jpg</url>
		<big_url>bigimages/ext5.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext6.jpg</url>
		<big_url>bigimages/ext6.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext7.jpg</url>
		<big_url>bigimages/ext7.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext8.jpg</url>
		<big_url>bigimages/ext8.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext9.jpg</url>
		<big_url>bigimages/ext9.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext10.jpg</url>
		<big_url>bigimages/ext10.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext11.jpg</url>
		<big_url>bigimages/ext11.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext12.jpg</url>
		<big_url>bigimages/ext12.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext13.jpg</url>
		<big_url>bigimages/ext13.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext14.jpg</url>
		<big_url>bigimages/ext14.jpg</big_url>
	</image>
	<image>
		<url>thumbnails/ext15.jpg</url>
		<big_url>bigimages/ext15.jpg</big_url>
	</image>
</images>

My question is how do I get lightbox to work when I click on the thumbnails? I found this thing called lightboxinjector that seems like it would work, but I am not advanced enough to understand the directions it gives for dynamic use. Or is there a lightbox clone that will work for this? Any help would be greatly appreciated.

Thanks,