The Slide3D Component supports Lightbox2. This is a tutorial about how to work with Lightbox2 in Slide3D Component. The downloaded package includes a demo project: demo_lightbox2.

1. Download and modify Lightbox2

Please download Lightbox2 package from its official website: http://www.huddletogether.com/projects/lightbox2/, unzip it to a local folder, navigate to subfolder js, open the file lightbox.js with a text editor, for example, Notepad on Windows or TextEdit on Mac, and change the last line to:

var objLightbox = null;
document.observe('dom:loaded', function () { objLightbox = new Lightbox(); });

The modified package is also included in the demo project: demo_lightbox2 .

2. Add Lightbox2 scripts and JavaScript helper function in HTML file

Open the HTML file, add following codes to the header:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">
function LightboxGroupLink(id) {
var linkID = document.getElementById(id);
objLightbox.start(linkID);
}
</script>

3. Add image objects in HTML file

Open HTML file, add image links to your HTML code:

<a href="imageslarge/0.jpg" rel="lightbox[slideshow]" title="Photo 0"></a>
<a href="imageslarge/1.jpg" rel="lightbox[slideshow]" title="Photo 1"></a>
<a href="imageslarge/2.jpg" rel="lightbox[slideshow]" title="Photo 2"></a>
<a href="imageslarge/3.jpg" rel="lightbox[slideshow]" title="Photo 3"></a>
<a href="imageslarge/4.jpg" rel="lightbox[slideshow]" title="Photo 4"></a>
<a href="imageslarge/5.jpg" rel="lightbox[slideshow]" title="Photo 5"></a>
<a href="imageslarge/6.jpg" rel="lightbox[slideshow]" title="Photo 6"></a>
<a href="imageslarge/7.jpg" rel="lightbox[slideshow]" title="Photo 7"></a>

Since there are no hyperlink texts, these links will not display in web browser.

4. Call Lightbox2 JavaScript helper function in Flash movie

To call external JavaScript function in Slide3D Component, please follow below steps:

4.1 Add import line in AS file

import flash.external.*;

4.2 Set event handler function for eventHandlerOnPress.

demoSlide.eventHandlerOnPress = "onPhotoClick";

4.3 Define event handler function:

function onPhotoClick(index:int):void
{
// call JavaScript only when image is on front
if (ExternalInterface.available)
ExternalInterface.call("LightboxGroupLink", "photo" + index);
}

The event handler function will call external JavaScript function LightboxGroupLink with parameter "photo" + index.

For more details about function ExternalInterface.call, please view the Help document of Adobe Flash CS3/CS4.