Ultimamente stanno aumentando sempre di più i “cloni” di lightbox, per ovviare alle limitazioni di questo script dove è possibile aprire solo immagini.

Anche io stesso ultimamente ho parlato di ottime alternative a lightbox e la scelta di quale usare può dipendere dal tipo di effetto, da cosa si può caricare nelle finestre e dalla compatibilità con i browser.

L’ultimo clone è nato pochi giorni, e si chiama BumpBox, script basato su Mootools.

La caratteristica più importante di BumpBox è la possibilità di poter aprire all’interno della finestra idocumenti PDF, oltre a poter aprire pagine HTML, immagini, video flv e oggetti flash, con un effetto a “rimbalzo”.

Di seguito il video el a descrizione dettagliata del funzionamento di BumBox.

Tutorial Javascript: BumpBox, un’ottima alternativa a lightbox

di Federico Pian

Altro aspetto molto importante è la compatibilità del plugin con tutti i browser:

• internet explorer 6,7 e 8;
• firefox;
• safari;
• opera;
• chrome.

Andiamo a vedere insieme come utilizzarlo in questo video:

Come hai potuto vedere utilizzare questo script è davvero semplice, e dopo aver scaricato i file necessari dovrai seguire questi passi:

Passo 1

Inserire le righe di codice tra i tag head necessarie per richiamare i vari script, come nell’esempio qui sotto:

<script language="javascript" type="text/ecmascript" src="mootools.js"></script>
<script language="javascript" type="text/ecmascript" src="mootoolsmore.js"></script>
<script type="text/javascript" src="flowplayer.min.js"></script>
<script type="text/javascript" src="bumpbox.js"></script>

Passo 2

Nel tag body, dove sono stati effettuati i collegamenti ipertestuali (a href), aggiungere gli attributi:

• class=”bumpbox”;
• title per mettere il titolo alla finestra;
• rel per impostare le dimensioni della finestra bumpbox.

<ul>
<li><a href=”test.flv” title=”FLV lightbox” rel=”640,480″ class=”bumpbox”>Apri un video flv</a></li>
<li><a href=”anim.swf” title=”SWF Lightbox” rel=”400,300″ class=”bumpbox”>Apri un filmato swf</a> </li>
<li><a href=”foto.jpg” title=”Image Lightbox”  class=”bumpbox”>Apri un’immagine </a></li>
<li><a href=”http://www.google.it” rel=”900,600″ title=”Google” class=”bumpbox”>Apri una pagina html</a></li>
<li><a href=”test.pdf” title=”PDF Lightbox” rel=”800,600″ class=”bumpbox”>Apri un file PDF</a></li>
</ul>

Puoi scaricarti i sorgenti dell’esempio, scompattare il file .rar e testare il funzionamento in locale sul tuo pc o sul tuo sito web o blog di questa utile alternativa a Lighbox.

Autore: Autore: Federico Pian di Fedeweb.net