WARNING: If you're reading the English version of this article, the links to the files and code may not work because of machine translation from Google. Go to the Italian version and copy the material from there. Alan Curtis.
A few months ago I've had to make a flash site for a tourist agency, which had to insert a gallery of images.
Since they were small series of precise images divided into pages, I thought of using a script that I love: the LightBox v2.
The beautiful LightBox 2 is that it can create the set of images, that loads the image and then clicked it adds the backward and forward buttons. So you can browse the gallery remains in its box!
But not only the LightBox 2 also makes the preloading of the other images for faster viewing. Magnificent!
But I have noticed a problem: the good LightBox v2 does not work if called from flash!
Armed with patience, I'm going to search the net if someone had made the adjustment I needed. But I find nothing.
Then I think about it a bit 'and I decide to do it.
Hence this little tutorial with example live, downloadable here:
Flash-lightboxv2.zip
(Compatible with flash 8 and mx 2004)
Site to see the script applied: http://www.globaltravel.com.al
Flash LightBox v2
-
Note: This script is an adaptation of the original LightBox V2 by Lokesh dhakar Site http://www.huddletogether.com/projects/lightbox2/
The adaptation consists in a LightBox to load the flash movie, while also allowing series of images with buttons up / down.
Here's how to integrate it into your website or flash movie:
1. copy the following folders on the same page that contains your / flash movie:
- Css
- Images
- Js
2. open the flash file and create a new layer (layer) called "actions" that will contain actionscript. In the first frame of actions layer insert the following code:
/ / Alan Curtis - Flash LightBox v2
/ / Flash for Adaptation of the original script by Lokesh dhakar - http://www.huddletogether.com/projects/lightbox2/
/ / Http://www.alancurtis.it
/ / Http://blog.alancurtis.it
/ /
/ / Create an array with the names of large images to load.
/ / Add images, just continue with "pics [4] = ..." and so on.
/ / I create an array with the names of the big images to load.
/ / To add more images, just continue with "pics [4] = ..." and so on.
pics = new Array ();
pics [0] = "borsacaterinabianca.jpg";
pics [1] = "borsacaterinabiancarossa.jpg";
pics [2] = "borsacaterinabrunera.jpg";
pics [3] = "borsacaterinarossa.jpg";
/ / Url - images folder contains no trailing slash!
/ / URL - folder with the images, without ending slash!
var url = "pictures";
/ / Now create a variable called "allpics" containing all the names of
/ / Images separated by a comma. This variable is then passed to the LightBox.
/ / Now I create a variable Called "allpics" Which contains all the images' names
/ / Divided by a paragraph. This var will be passed to LightBox.
allpics var = url + "/" + pics [0];
var i = 1;
while (i <pics.length) {
allpics allpics = + "" + url + "/" + pics [i];
i + +;
}
3. Also in flash files, create thumbnails or buttons that will load the images, convert them to "symbol -> Button" and enter the following code for each:
on (release) {
getURL ("javascript: show (0, '" allpics + + "')");
}
4. Open the page that contains the flash movie with html editor or dreamweaver / frontpage and make the following changes:
a) Nell'HEAD (between <head> and </ head>) to add the following lines:
src="js/prototype.js" <script type="text/javascript"> </ script> <br /> <br> <script type = "text / javascript" src = "js / scriptaculous.js? load = effects "> </ script> <br /> <script type="text/javascript" src="js/lightbox.js"> </ script> <br /> <br> <link rel =" stylesheet "href =" css / lightbox.css "type =" text / css "media =" screen "/> <br /> <br>
b) in the OBJECT tag (flash file) to add the following property (if not already included automatically):
<param name="allowScriptAccess" value="sameDomain" />
c) the EMBED tag add the following property with the other (if not already included automatically):
<embed allowScriptAccess="sameDomain" …….>
d) After the movie, in an empty area (eg a cell or row), insert the following tag:
<div id="anchors"> </ div>
That's it, your flash movie is now ready to upload galleries of images made with the LightBox v2!
Enjoy the show!
