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
Abbonati al Feed Rss
Iscriviti alla Newsletter
Blographik è un progetto dedicato in larga parte a web design, grafica e risorse per blog. Nasce nel Gennaio del 2006 con lo scopo di seguire i continui sviluppi del blogging e del web design cercando di proporre sempre materiale ed informazioni utili per tutti i professionisti e gli appassionati del settore.
23 Commenti
Ciao,
un’altra alternativa a Ligtbox è Lytebox che offre in più la possibilità di creare degli slideshow.
Gli effetti di BumpBox sono veramente spettacolari!
@Iole: grazie per aver suggerito questa altra risorsa
.
Veramente fantastico questo BumpBox! io avevo solo provato lightbox ma questo ha qualcosa veramente in più e ne vale veramente la pena averlo!!!…ma scusate una domanda!!!
e se io volessi fare vedere nel mio sito i miei lavori in pdf, potrei dopo impedire che qualcun’altro li copi e li modifichi eventualmente!???
grazie di tutto
andrea
scusatemi ma avrei un altra domanda.. forse un pò più interessante! della precedente, che comunque ho già risolto!….
la domanda è questa:
io utilizzo nella realizzazione di siti il binomio flash e html..
ma qualcuno sa che script c’è da inserire in flash per rendere visibile l’effetto in flash?, come la Lightbox insomma…solo perchè ho cercato ma non ho trovato niente a riguardo!
grazie e tutti e soprattutto a chi vorrà rispondermi!:-)
@Andrea: rispondo alla tua prima domanda:
la protezione di un pdf non dipende dall’applicazione che usi per farlo visualizzare. Credo non si possa fare ciò che tu richiedi
.
La tua seconda domanda:
.
non posso aiutarti, non sono un esperto di flash, aspettiamo qualche lettore che vogliao partecipare, anche se non attinente a questa discussione
A presto
@Andrea
Ciao se ho ben capito tu vuoi far aprire una finestra in stile lightbox direttamente da un pulsante in un filmato swf.
Per quanto riguarda flash e lightbox, puoi leggere questo articolo di alan curtis, dove viene usato action script 2, oppure un mio articolo, dove viene usato action script 3.
Inoltre ti segnalo altri 2 miei articoli, dove si parla di Flash e Thickbox, oppure Flash e Lightview. Thickbox e Lightbox sono dei cloni di lightbox, simili a Bumpbox.
Per Bumpbox forse più avanti scriverò un tutorial per integrarlo con flash.
ti ringrazio veramente molto, quindi se ho capito bene per ora non c’è uno script da applicare a Bumpbox!, mi ero molto interessato a questo perchè oltre all’effetto comunque molto carino, poteva inoltre aprire documenti pdf, html, swf….che sono quelli che mi servirebbero…..comunque grazie mille attenderò il tuo prossimo tutorial…veramente troppo gentile!
Probabilmente basta dare un’occhiata al codice di bumpbox per poterlo intergrare con flash, cosa che vedrò nei prossimi giorni. Intanto prova a vedere le soluzioni che ti ho dato. Anche con lightview e thickbox puoi caricare i pdf, utilizzando gli iframe.
Ciao!
@Fede:
eventualmente se nei prossimi giorni riesci a capire come integrare flash su bumpbox, potremo scriverci un guest post su blographik.
Fammi sapere e grazie per l’aiuto
, blogrpahik è sempre alla ricerca di validi collaboratori.
Fantastico questo script! Grazie per avermelo fatto conoscere…appena avrò due minuti lo proverò poi ti farò sapere se mantiene le promesse
Ciao!
@liliansi: bene! sono contento che questo script ti soddisfi! per qualunque problema chiedi pure! ciao!
Perdonami l’ignoranza
Per installarlo e farlo funzionare in wordpress:
1. i file che hai descritto nel video li scarico e li copio nel mio spazio web…in che directory? quella dove ho wordpress? che nel mio caso è nella root…
2. metto le righe per richiamarli nel file header.php? prima di ???
3. un esempio pratico….faccio un post in cui ho una foto che voglio attivare quell’effetto….che scrivo nel post? cioè, metto html visuale e poi la riga:
Apri un’immagine
Mi sono perso
Ciao maxanima, Bumpbox è un plugin che al momento non è “compatibile” con wordpress.
Puoi utilizzare molte altre alternative che funzionano su wordpress, tra cui shadowbox, di cui ho parlato anche nel mio blog.
ahhhh Fede!!! ecco!!!! che peccato però, era cosi carino
ho visto rispondevi a liliansi e lei ha un blog WP…pensavo…. 
Pazienza…grazie Fede.
ciao!npermettimi la domanda.. ma come si fa a modificare le dimensioni della bumpbox che si apre?nse all’href aggiungo rel=”800,600″ mi si decentra la finestra e non si vede nulla… ngrazie
ciao!npermettimi la domanda.. ma come si fa a modificare le dimensioni della bumpbox che si apre?nse all’href aggiungo rel=”800,600″ mi si decentra la finestra e non si vede nulla… ngrazie
Ciao Alessandra e benvenuta su blographik.nnSpero che alla tua risposta Federico, l’autore del post, possa aiutarti a risolvere il tuo problema.n
Ciao Alessandra e benvenuta su blographik.nnSpero che alla tua risposta Federico, l’autore del post, possa aiutarti a risolvere il tuo problema.n
Ciao Alessandra! ci troviamo anche qui! mi sembra strano questo problema, se vuoi mandami una mail con i sorgenti, cosu00ec posso capire meglio dov’u00e8 il problema. L’indirizzo u00e8 federico.pian@gmail.com. Ciao!
Ciao Alessandra! ci troviamo anche qui! mi sembra strano questo problema, se vuoi mandami una mail con i sorgenti, cosu00ec posso capire meglio dov’u00e8 il problema. L’indirizzo u00e8 federico.pian@gmail.com. Ciao!
ciao!
permettimi la domanda.. ma come si fa a modificare le dimensioni della bumpbox che si apre?
se all'href aggiungo rel=”800,600″ mi si decentra la finestra e non si vede nulla…
grazie
Ciao Alessandra e benvenuta su blographik.
Spero che alla tua risposta Federico, l'autore del post, possa aiutarti a risolvere il tuo problema.
Ciao Alessandra! ci troviamo anche qui! mi sembra strano questo problema, se vuoi mandami una mail con i sorgenti, così posso capire meglio dov'è il problema. L'indirizzo è federico.pian@gmail.com. Ciao!
Un Trackback
30 luglio 2009 alle 09:38
[...] Web Design: [Video] Questo è un eccellente alternativa a LightBox Ti è piaciuto l’articolo e non vuoi più perdertene neanche uno? Seguimi gratuitamente tramite i feed RSS. Se non sai cosa sono, guarda questo video Ora non sai come abbonarti? Guarda questo video Inoltre potrai seguirmi su twitter, facebook o friendfeed! [...]