How to open Lightbox in Flash banners and Flash slideshows?

This tutorial shows you how to open LightBox effect in Flash Banner Wizard and Flash Slideshow Wizard.

Download free script HTML5 LightBox

You can download the free script HTML5 LightBox at http://html5box.com/download/html5_lightbox_free.zip . The homepage of this script is HTML5 LightBox

Add HTML5 LightBox script and JavaScript helper function in your HTML file

Unzip the downloaded file, copy ITS SUBFOLDER html5lightbox to the SAME FOLDER as your HTML page, then open your HTML file, copy following codes before the tag </head>.

<script type="text/javascript" src="html5lightbox/html5lightbox.js"></script>
<script type="text/javascript">
function LightboxGroupLink(id) {
var href = document.getElementById(id).getAttribute('href');
html5Lightbox.showItem(href);
}
</script>

Add image objects in HTML file

Open HTML file, add image links objects. You can add the HTML codes just before where you want to display the Flash Slideshow or Flash Banner. Since there are no hyperlink texts, these links will not display in web browser.

<a id="photo0" href="imageslarge/0.jpg" class="html5lightbox" data-group="slideshow" title="Photo 0"></a>
<a id="photo1" href="imageslarge/1.jpg" class="html5lightbox" data-group="slideshow" title="Photo 1"></a>
<a id="photo2" href="imageslarge/2.jpg" class="html5lightbox" data-group="slideshow" title="Photo 2"></a>
<a id="photo3" href="imageslarge/3.jpg" class="html5lightbox" data-group="slideshow" title="Photo 3"></a>
<a id="photo4" href="imageslarge/4.jpg" class="html5lightbox" data-group="slideshow" title="Photo 4"></a>
<a id="photo5" href="imageslarge/5.jpg" class="html5lightbox" data-group="slideshow" title="Photo 5"></a>
<a id="photo6" href="imageslarge/6.jpg" class="html5lightbox" data-group="slideshow" title="Photo 6"></a>
<a id="photo7" href="imageslarge/7.jpg" class="html5lightbox" data-group="slideshow" title="Photo 7"></a>


Call Lightbox2 JavaScript helper function in Flash movie

Flash Banner Wizard and Flash Slideshow Wizard support calling JavaScript function.

Take Flash Slideshow Wizard as an example, click and select an image in the image list, then in the right panel, select the Web Link tab.


Check the option Open webpage when clicking on Flash movie, then choose the option JavaScript Function, and enter LightboxGroupLink. This is the name of Lightbox JavaScript help function which we defined in this tutorial Step 2.

Enter the corresponding photo id to the Parameter field. The id value of each photo is defined in this tutorial Step 3.

Upload your files and test the effects

Basically due to the Flash Security Settings, the effect will not work when you open the file from local computer. You need to upload all the files to your web server and test the effect online.

An example is as following: