Home > flash, javascript, web > Flash e Lightbox

Flash e Lightbox

Come integrare in modo semplice una photo gallery fatta in Flash con Lightbox.
Per vedere un esempio del risultato potete cliccare sull’immagine qui sotto:

Demo integrazione flash-lightbox

Demo integrazione flash-lightbox

Come utilizzare questa soluzione nelle tue pagine

Questa soluzione utilizza una versione di Lightbox leggermente modificata che si usa esattamente come Lightbox, cioé importando lo script ed il foglio di stile nell’header dalla pagina html:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox_x_flash.js"></script>

Prototype è un framework javascript, mentre Scriptaculous è una libreria che permette di creare effetti grafici con javascript in modo semplice e veloce. Entrambe sono richieste da Lightbox.

Lightbox richiede che i link relativi alle immagini che si vogliono visualizzare ingrandite contengano il tag rel=”lightbox”, o rel=”lightbox[nome_galleria]” per le gallerie di immagini. Questo passaggio, però, può essere tranquillamente ignorato perché è lo stesso script modficato che si occupa di creare il link per Lightbox.

Infine, le immagini nella galleria Flash devono essere collegate ad un link che attiva la funzione flashLightbox, che vuole come parametro il path e il nome della foto:

javascript:flashLightbox('foto/01.jpg')

Qui si trovano tutti i file necessari: flash_lightbox.zip

Se invece ti interessa solo lo script modificato: lightbox_x_flash.js

Come funziona

Normalmente Lightbox funziona in questo modo:

  • aspetta che sia stato completato il caricamento della pagina html;
  • cerca tutti i link che contengono rel=”lightbox” e registra le funzioni da eseguire quando sono selezionati;
  • inserisce nella pagina i div usati per l’overlay dell’immagine.

L’idea, molto semplice, è di creare un link invisibile e, ogni volta che si clicca su un’immagine nella galleria flash, cambiare al volo l’immagine di questo link e poi usare Lightbox per visualizzare l’immagine in modo “standard”.

Questo link viene creato direttamente dallo script modificato (nella funzione initialize) ed ha questa forma:

<div style="display:none">
  <a href="#" rel="lightbox" id="light_link">
    <img src="" alt="immagine" id="light_img_src" />
  </a>
</div>

Nel div usato come contenitore è specificato display:none perché non vogliamo che l’immagine contenuta diventi visibile: deve potersi vedere solo nella galleria o nell’overlay.
Al link e all’img all’interno del link sono stati assegnati degli id unici che saranno usati per richiamare questi elementi ed impostare dinamicamente l’immagine negli attributi href e src, rispettivamente.

Infine è stata aggiunta la funzione che gestisce i click nella galleria Flash:

function flashLightbox(img) {
 $('light_link').href = img;
 $('light_img_src').src = img;
 light.start($('light_link'));
}

La funzione $ è definita in Prototype e serve a richiamare l’elemento con l’id specificato. In questo caso è utilizzata per modificare l’immagine del (e nel) link.

La versione standard di Lightbox crea un oggetto senza assegnarlo esplicitamente ad una variabile. Qui, però, è necessario chiamare il metodo start() (che fa partire la visualizzazione nell’overlay)  ogni volta che si clicca su un’immagine nella galleria. Per questo motivo il comando di inizializzazione di Lighbox (ultima riga di lightbox.js)  è stato modificato in modo da fornire un oggetto sul quale sia possibile richiamare il metodo esplicitamente:

document.observe('dom:loaded', function () { light = new Lightbox(); });

Storia

Qualche giorno fa un amico mi ha chiesto di dare un’occhiata ad uno script Javascript che aveva scaricato da internet.
Aveva bisogno di integrare una photo gallery fatta in Flash con Lightbox. Lo script scaricato permetteva di farlo ma ingrandiva l’immagine tutta d’un botto, senza gli effetti grafici carini tipici di Lightbox.
Mettendo a confronto il sorgente originale di Lightbox con quello modificato per Flash, mi sono accorto che la libreria era stata pesantemente modificata e la parte degli effetti era stata eliminata.
Ho pensato che invece di riscrivere lo script di Lightbox o modificarlo così pesantemente, doveva esserci un modo semplice per usare le funzionalità di Lightbox così come sono. In effetti, il modo c’è ed è anche MOLTO semplice.

  1. Papaveri e Papere
    24 Gennaio 2009 a 16:25 | #1

    OTTIMO!! Abbiamo capito tutto….

    Ciao Megalotto

  2. ichnos
    22 Novembre 2009 a 11:15 | #2

    Ciao, l’articolo è veramente interessante!! ed è proprio quello che cercavo…. io ho comunque un problema:

    l’animazione flash che ho è identica alla tua demo ed i link sulle immagini sono definiti da un file XML all’interno dei tag ……

    ora il mio problema è che se inserisco tra questi tag
    javascript:flashLightbox(‘foto/fotomia.jpg’) non funziona ma da errore e non si apre nulla!!!!

    naturalmente ho inserito nella pagina tutte le cose che hai detto nell’articolo!!

    soluzioni?

  1. Nessun trackback ancora...