Flash Tutorial:

How to Open Image and Video LightBox Popup in Flash?

This tutorial will guide you how to open LightBox popup in Flash. The LightBox effect supports images, videos, YouTube, Vimeo, Flash and web page.

Download HTML5 Lightbox

You can download the free script HTML5 LightBox at HTML5 LightBox Home Page.

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 into the head section, 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>

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

<a id="slide1" href="imageslarge/1.jpg" class="html5lightbox" data-group="slideshow" title="Photo 1"></a>
<a id="slide2" href="imageslarge/2.jpg" class="html5lightbox" data-group="slideshow" title="Photo 2"></a>
<a id="slide3" href="imageslarge/3.jpg" class="html5lightbox" data-group="slideshow" title="Photo 3"></a>
<a id="slide4" href="imageslarge/4.jpg" class="html5lightbox" data-group="slideshow" title="Photo 4"></a>
<a id="slide5" href="imageslarge/5.jpg" class="html5lightbox" data-group="slideshow" title="Photo 5"></a>

To open a YouTube video in LightBox popup, add link like following:

<a id="slide6" href="http://www.youtube.com/embed/YE7VzlLtp-4" class="html5lightbox" data-group="slideshow" title="YouTube Video"></a>

To open a local MP4 video in LightBox popup, use code like following. The data tag data-width and data-height are used to specify the size of the video.

<a id="slide7" href="images/Big_Buck_Bunny.mp4" class="html5lightbox" data-width="480" data-height="272" data-group="slideshow" title="Local MP4 Video"></a>

To open a Flash movie in LightBox popup, use code like following. The data tag data-width and data-height are used to specify the size of the Flash movie.

<a id="slide8" href="images/snow.swf" class="html5lightbox" data-width="560" data-height="180" data-group="slideshow" title="Flash Banner"></a>

Please make sure to upload the image files to your web server, the URL addresses specified in the HTML codes are correct.

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:

Home | Download | Order Now | Contact us | Links | What's New | Company | Privacy policy | Site Map
Copyrightę Aleosoft.com All Rights Reserved.