Flash LightBox v2

ATTENZIONE: se state leggendo la versione inglese di questo articolo, i link ai files e il codice potrebbero non funzionare a causa della traduzione automatica di Google. Andate nella versione italiana e copiate il materiale da lì. Alan Curtis.

Qualche mese fà mi è capitato di dover fare un sito in flash per un’agenzia turistica, dove bisognava inserire delle gallerie di immagini.

Visto che erano piccole serie di immagini suddivise in pagine ben precise, ho pensato di utilizzare uno script che adoro: il LightBox v2.

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. Magnifico!

Però mi sono accorto di un problema: il buon LightBox v2 non funziona se richiamato da flash!

Armato di pazienza, mi metto a cercare in rete se qualcuno avesse fatto l’adattamento che mi serviva. Però non trovo nulla.

Allora ci penso un po’ e decido di farlo io.

Ecco quindi questo piccolo tutorial con esempio live, scaricabile qua:
flash-lightboxv2.zip
(compatibile flash 8 e mx 2004)

Sito per vedere lo script applicato: XXXXXX (il sito è stato cambiato)

Flash LightBox v2


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

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!
Buona visione!

Altri articoli che potrebbero interessarti