Dopo aver perso ore e ore per capire come funziona e come integrare correttamente Fancybox in un sito internet, vi scrivo qui delle istruzioni (idealmente semplificate) su come farlo. Sento la necessità di scrivere questo articolo perché, nonostante io non sia un professionista nel settore (anzi!), ma penso comunque di cavarmela abbastanza bene a smanettare con i siti, ho trovato difficoltà nel seguire le istruzioni pubblicate sul sito ufficiale (visto che tralasciano dei passi importanti) e nel trovare informazioni supplementari (anche in inglese, figuriamoci in italiano).*

*Nota doverosa: essendo che i tempi di questo blog sono come quelli della giustizia italiana – molto lunghi (per questo articolo hanno raggiunto i sette mesi dall’idea alla pubblicazione), ora le informazioni che si trovano sul sito ufficiale sono state rese più chiare. Pubblico comunque l’articolo, visto che ormai è scritto, nel caso torni utile a qualcuno! 🙂

Ho scoperto Fancybox perché volevo inserirla in un sito a cui stavo lavorando, e solo in seguito ho realizzato che in passato avevo tentato invano di integrarla anche in questo blog per la visualizzazione delle immagini utilizzando un plugin; ora, quando ho un po’ di tempo, posso implementare il codice “manualmente”, senza usare un plugin esterno, malfunzionante peraltro! 🙂

Per chi non lo sapesse, Fancybox è un insieme di javascript e altri ammucchi di codice che, opportunamente integrati all’interno di un sito internet, permettono di aprire una fancy box appunto, ovvero un “contenitore” delle dimensioni prestabilite (da voi) che si sovrappone alla pagina e che può contenere qualsiasi cosa. Tipicamente viene usato per visualizzare le immagini in modo graficamente molto carino a mio avviso, anche perché è possibile aggiungere effetti grafici personalizzati molto belli; altri contenuti tipici sono video (di Youtube, ad esempio). Se volete vedere qualche esempio di come funziona Fancybox, date un’occhiata a questa pagina. Ma veniamo al dunque: come implementare Fancybox in un sito internet?

  • Scaricare il pacchetto dal sito di Fancybox, al momento la versione disponibile è la 1.3.1!
  • Scompattare i files e caricarli sul server. All’interno dell’archivio che avete scaricato troverete una pagina HTML di esempio ed una cartella chiamata “fancybox” contenente i file che vi servono per far funzionare il tutto; vi consiglio di prendere questa cartella e trasferirla direttamente sul server, in modo da mantenere i file che servono a Fancybox (circa una ventina) separati dagli altri. Ecco, in breve, quali sono i file contenuti nella cartella “fancybox”:
    • immagini varie: sono gli elementi grafici di Fancybox, niente di particolarmente emozionante;
    • jquery.fancybox-xxx.css: è il foglio di stile di Fancybox, necessario per la corretta visualizzazione degli elementi grafici;
    • jquery.fancybox-xxx.js: contiene gli javascript che fanno effettivamente funzionare il plugin;
    • jquery.fancybox-xxx.pack.js: come sopra.
    • jquery.mousewheel-xxx.pack.js: file necessario per abilitare la rotellina del mouse per passare da un’immagine all’altra in caso di gallerie di immagini;
    • jquery.easing-xxx.pack.js: file aggiuntivo necessario per abilitare alcuni effetti grafici particolari.
  • E’ inoltre necessario andare a recuperare altri due files, di cui uno facoltativo, e crearne un altro personalizzato in base alle nostre necessità:
    • http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js: altro javascript necessario al corretto funzionamento di Fancybox, a voi la scelta se usare direttamente questo file hostato da Google (come ho visto molte persone fanno), oppure se volete caricarlo sul vostro server in modo da essere più sicuri;
    • custom.js: questo è invece il file che dovrete creare voi (istruzioni più dettagliate in fondo all’articolo), attraverso il quale definirete quali elementi della pagina apriranno la finestra di Fancybox e le proprietà della stessa, nonché eventuali effetti aggiuntivi nel caso abbiate incluso anche il file jquery.easing.js.
  • Per implementare le funzionalità di Fancybox all’interno di una pagina, è necessario andare ad editare il codice della pagina in modo che essa richiami i file precedentemente scaricati. L’ordine con il quale essi vengono richiamati, a quanto pare, è fondamentale (ho perso una giornata a capire perché non funzionava, ed era proprio l’ordine)..! Per fare ciò è necessario aprire la pagina a cui siamo interessati in modo da poterne editare il codice, ed inserire i seguenti tag all’interno del tag <head> (ovviamente sostituite gli indirizzi dei file se li avete salvati da qualche parte parte):

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script>

<script type=”text/javascript” src=”./fancybox/jquery.fancybox-xxx.pack.js”></script>

<script type=”text/javascript” src=”./fancybox/jquery.easing-xxx.pack.js”></script> (opzionale per gli effetti grafici)

<script type=”text/javascript” src=”./fancybox/jquery.mousewheel-xxx.pack.js”></script> (opzionale per abilitare la rotellina del mouse)

<link rel=”stylesheet” href=”./fancybox/jquery.fancybox-xxx.css” type=”text/css” media=”screen” />

<script type=”text/javascript” src=”./fancybox/custom.js”></script>

Non chiedetemi perché i file vadano caricati in questo ordine, anzi ora che ci penso non chiedetemi proprio niente: così sembra che funzioni 🙂

Ora la pagina è a tutti gli effetti pronta per deliziarci con i mirabolanti effetti grafici di Fancybox! Manca solo l’ultimo passo: personalizzare il tutto, ovvero dire al browser quali collegamenti devono essere aperti con Fancybox e quali no. Per fare questo, come già detto in precedenza, bisogna andare a personalizzare il file “custom.js”. Qui vi spiegherò in maniera estremamente semplice come fare ciò in modo da ottenere qualcosa di non troppo elaborato ma che funzioni subito. Un esempio di cosa scrivere in custom.js:

$(document).ready(function() {
$(‘a.trailer’).fancybox({
‘frameWidth’: 640,
‘frameHeight’: 385
});
});

La parte $(document).ready(function() { … }); va sempre indicata poiché indica al browser che il suo contenuto deve essere letto dopo che la pagina è stata caricata; è una delle funzioni fondamentali di jQuery (su cui si basa Fancybox). All’interno di questa funzione possiamo andare a specificare gli elementi che saranno caratterizzati dall’apertura della mitica finestrella Fancybox. Come vedete la notazione è molto simile a quella dei fogli di stile CSS, in questo caso “a.trailer” indica che Fancybox si aprirà per tutti gli elementi <a> (i link della pagina, quindi) che abbiano class=trailer. In questo modo è possibile applicare Fancybox a tutti i link ($(‘a’)), a tutti i link con ID “trailer” ($(‘a#trailer’)), a tutti gli elementi con ID “trailer” ($(‘#trailer’)) o a tutti i link contenuti in un oggetto che abbia ID “content” ($(‘#content a’)). Le righe che compaiono all’interno delle parentesi graffe che seguono definiscono le proprietà di quella specifica finestra di Fancybox; in questo caso è stata impostata una larghezza di 640 pixel e un’altezza di 385. Per ulteriori informazioni e per una lista delle proprietà che potete specificare, vi rimando a questa pagina.

Come caricare Fancybox al caricamento della pagina

jQuery(document).ready(function() {
$(“#autotrigger”).trigger(‘click’);
});

Questo codice da inserire in custom.js è sufficiente per caricare la finestrella di Fancybox al caricamento della pagina. Nel codice HTML della pagina bisogna comunque inserire il link come negli esempi precedenti, ma in questo caso può essere non visibile visto che nessuno deve cliccarci (è solo una necessità di Fancybox):

<a href=elementochevogliamocaricare.ext style=”display:none” id=autotrigger></a>

Spero di aver scritto tutto il necessario per installare Fancybox, in caso contrario fatemelo sapere in modo che possa aggiornare l’articolo! 😉

Attenzione: questo articolo è aggiornato al 12 giugno 2010, per la versione 1.3.1 di Fancybox; eventuali futuri aggiornamenti possono comportare alcune differenze più o meno sostanziali alle istruzioni scritte qua sopra. Questa procedura vuole essere una scaletta da seguire, se non siete sicuri di quello che state facendo fate una copia dei file su cui state lavorando prima di apportare le modifiche; non mi assumo in nessun caso la responsabilità di ciò che combinate.

Offrimi un caffè!

Ti è piaciuto l'articolo? Le informazioni che hai letto ti sono state utili?
Clicca sulla tazza per offrimi un caffè e supportare questo blog!