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:
[code lang=”javascript”] <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>
[/code]
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>
Autore: Autore: Federico Pian di Fedeweb.net