Flash Tutorial:

How to execute Lightbox2 in Flash?

Lightbox2 is a great way to show enlarged image without leaving current browser window. This tutorial will guide you how to execute Lightbox2 in Flash. To execute Lightbox2 in Flash, basically, there are three things to do:

1. Prepare Lightbox2
2. Add Lightbox2 references and Javascript helper function to your HTML code
3. Add Javascript link to Flash

Prepare Lightbox2

Download Lightbox2 from official website: http://www.huddletogether.com/projects/lightbox2/. The directly download link is http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.04.zip .

Download the package, then upzip it to your web folder. To make things work, we need to make a minor change to scripts of Lightbox2.

Navigate to the subfolder js, open the lightbox.js, change the last line to:

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

You can also directly download the modified package at: http://www.aleosoft.com/download/lightbox2.04.modified.zip

Add Lightbox2 references and Javascript helper function to your HTML code

Open your 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 slideLink = document.getElementById(id);
objLightbox.start(slideLink);
}
</script>

Add image links to your HTML file:

<a id="slide1" href="images/image1.jpg" rel="lightbox[3dslideshow]" title="Image 1"></a>
<a id="slide2" href="images/image2.jpg" rel="lightbox[3dslideshow]" title="Image 2"></a>
<a id="slide3" href="images/image3.jpg" rel="lightbox[3dslideshow]" title="Image 3"></a>
<a id="slide4" href="images/image4.jpg" rel="lightbox[3dslideshow]" title="Image 4"></a>

To display all the images in same group, the value of rel need to be same.

Please also make sure to upload the image files to your web server, the folder specified in the above HTML code.

Add Javascript link to Flash

If you are using Aleo 3D Flash Slideshow Creator, please click "Image Options" tab on the right bottom of the main window, select an image, then check the option "Web Link", and enter the "URL Address" as following for each image:

javascript:LightboxGroupLink('slide1')

javascript:LightboxGroupLink('slide2')

javascript:LightboxGroupLink('slide3')

javascript:LightboxGroupLink('slide4')

The value of the parameter in the function need equal to the id value in the image links codes.

Below is an example: