Il bello del LightBox 2 è che può creare le serie di immagini, cioè carica l’immagine cliccata
e poi ci aggiunge i pulsanti avanti e indietro. Così si può navigare la galleria restando nella sua finestra!
Ma non solo, il LightBox 2 fà anche il preloading delle altre immagini in modo da velocizzare la visione.
Ecco quindi questo piccolo tutorial con esempio live, scaricabile qua:
flash-lightboxv2.zip
(compatibile flash 8 e mx 2004)
-
Nota: Questo script è un adattamento dell’originale LightBox V2 by Lokesh Dhakar del sito http://www.huddletogether.com/projects/lightbox2/
L’adattamento consiste nel poter caricare il LightBox da un filmato flash, permettendo anche serie di immagini con pulsanti di avanti/indietro.
Ecco come fare per integrarlo nel vostro sito o filmato flash:
1. copiare le seguenti cartelle nella stessa che contiene la vostra pagina/filmato flash:
- css
- images
- js
- fotografie
2. aprire il file flash e creare un nuovo layer (livello) chiamato “actions”, che conterrà gli actionscript. Nel primo frame del livello actions inserire il seguente codice:
// Alan Curtis – Flash LightBox v2
// Adaptation for flash of the original script by Lokesh Dhakar – http://www.huddletogether.com/projects/lightbox2/
// http://www.alancurtis.it
// http://blog.alancurtis.it
//
// Creo un array con i nomi delle immagini grandi da caricare.
// Per aggiungere immagini, basta continuare con “pics[4] = …” e così via.
// 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 – cartella dove sono contenute le immagini, senza slash finale!
// Url – folder with the images, without ending slash!
var url = “fotografie”;
// Ora creo una variabile chiamata “allpics” che contiene tutti i nomi delle
// immagini separate da una virgola. Questa variabile verrà poi passata al LightBox.
// Now I create a variable called “allpics” which contains all the images’ names
// divided by a comma. This var will be passed to LightBox.
var allpics = url+”/”+pics[0];
var i = 1;
while (i<pics.length) {
allpics = allpics+”,”+url+”/”+pics[i];
i++;
}
3. Sempre nel file flash, creare le thumbnail o i pulsanti che caricheranno le immagini, convertirli in “symbol -> Button” e inserire per ognuno il seguente codice:
on (release) {
getURL(“javascript:show(0, ‘”+allpics+”‘)”);
}
4. Aprire la pagina che contiene il filmato flash con un editor di html o dreamweaver/frontpage e apportare le seguenti modifiche:
a) Nell’HEAD (tra <head> e </head>) aggiungere le seguenti righe:
<script src=”js/prototype.js” type=”text/javascript”></script><br /><br><script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script><br /><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) nel tag OBJECT (del file flash) aggiungere la seguente proprietà (se non già inclusa in automatico):
<param name=”allowScriptAccess” value=”sameDomain” />
c) nel tag EMBED aggiungere la seguente proprietà assieme alle altre (se non già inclusa in automatico):
<embed allowScriptAccess=”sameDomain” …….>
d) dopo il filmato, in una zona vuota (es. una cella o riga), inserire il seguente tag:
<div id=”anchors”></div>
Ecco fatto, il vostro filmato flash ora è pronto per caricare le gallerie di immagini fatte con il LightBox v2!