FancyBox

Oggi voglio parlarvi delle fancy box, i nuovi lightbox per quelli del mestiere, infatti adesso abbiamo la possibilità di visualizzare immagini con effetti nuovi di transizione, ma non solo anche contenuti testuali, html, flash e gestire all’interno dei campi iframe e chiamate ajax.

In queste pagina vi mostrerò le sintassi di codice da usare per avere gli effetti che vi mostrerò nella pagine degli esempi, in più vi illustrerò altre variabili che possiamo utilizzare per i nostri scopi.

Prima di tutto dobbiamo inserire nella nostra pagina gli “script” jquery, jquery.fancybox e jquery.easign. Mi raccomando non fate come me che vi dimenticate di inserire jquery e non capite il perchè non funziona :p
Potete scaricarvi il pacchetto completo con le immagini e gli script da Google Code

<script type="text/javascript" src="tuo_percorso/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jtuo_percorso/jquery.fancybox-1.2.1.js"></script> 
<script type="text/javascript" src="tuo_percorso/jquery.easing.1.3.js"></script>

Adesso abbiamo bisogno di associare anche il foglio di stile delle nostre fancy box

<link href="tuo_percorso/jquery.fancybox.css" rel="stylesheet" type="text/css" />

E adesso siamo quasi pronti per iniziare… Vi mostro la pagina degli esempi che spiegherò parte per parte. Esempio

Partiamo dall’esempio 1, lightbox semplice:
Dobbiamo settare al $(document).ready della nostra pagina le seguenti variabili, che sono associate al fancy box dell’immagine con classe img1

<script type="text/javascript">
	$(document).ready(function() { 
	$(".img1").fancybox({
		'zoomSpeedIn': 500,
		'zoomSpeedOut': 500,
		'overlayShow': true,
		'zoomOpacity':false,
		'overlayOpacity':0.8
	}); 
	}); 
</script>

Il link della nostra immagine sarà così composto:

<a class="img1" href="img/zoom1.jpg" title="image">
	<img src="img/min1.jpg" />
</a>

Esempio 2, lightbox semplice senza però la mascherà di overlay:

<script type="text/javascript">
	$(document).ready(function() { 
	$(".img2").fancybox({
		'zoomSpeedIn': 500,
		'zoomSpeedOut': 500,
		'overlayShow': false,
		'zoomOpacity':true
	});
	}); 
</script>

Il link della nostra immagine:

<a class="img2" href="img/zoom2.jpg" title="image">
	<img src="img/min2.jpg" />
</a>

Esempio 3, qui iniziamo a vedere qualcosa in più rispetto ai semplici lightbox, l’utilizzo dell’easing per fare la transizioni di entrata e uscita, senza la maschera di overlay:

<script type="text/javascript">
	$(document).ready(function() { 
	$(".img3").fancybox({
		'zoomSpeedIn': 1000,
		'zoomSpeedOut':1000,
		'overlayShow': false,
		'easingIn':'easeOutBack',
		'easingOut':'easeInBack',
		'zoomOpacity':true
	});
	}); 
</script>

Il link della nostra immagine:

<a class="img3" href="img/zoom3.jpg" title="image">
	<img src="img/min3.jpg" />
</a>

Oltre alle animazioni sulle singole immagini possiamo ovviamente anche avere una gallery di immagini e quindi devono essere concatenate tra di loro.

<script type="text/javascript">
	$(document).ready(function() { 
	$(".group").fancybox({
		'overlayShow': true,
		'overlayOpacity':0.8
	}); 
	}); 
</script>

Script semplice, basta associare alle nostre immagini di la classe ‘.group’ e l’attributo ‘rel’ univoco. Nel mio caso ho uscato lo stesso nome, ma possiamo benissimo avere più gallery nella stessa pagina e quindi dobbiamo usare ‘rel’ diversi.

<a class="group" href="img/zoom1.jpg" title="image" rel="group">
	<img src="img/min1.jpg" />
</a>

Ed ora vediamo la parte che forse è più interessante, ovvero poter far caricare all’interno del nostro box qualcosa che non sia un immagine, vediamo come si fa:
teniamo presente che il $(document).ready per la visualizzazione va benissimo qualsiasi di quelli visti in precedenza.
Visualizzazione di un codice inline, tipo la presentazione di un video preso da youtube:

<a class="group" href="#youtube" title="video da youtube" rel="group"><img src="img/default.jpg" /></a>
<div id="youtube" style="display:none;">
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/LbDjX3kM1kc&hl=it&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/LbDjX3kM1kc&hl=it&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
</div>

All’ href del link associamo l’id del div che contiene il nostro codice.

Visualizzazione di iframe, visualizzazione di una pagina all’interno del box:

<a class="group" href="http://www.google.com/webhp?ie=UTF-8&iframe"  rel="group"><img src="img/google.jpg" style="border:0px;" /></a>

Possibilità di effettuare chiamate ajax:

<a class="group" href="ajax.txt" rel="group"><img src="img/min3.jpg" style="border:0px;" /></a>

E con questo ho illustrato tutti gli esempi, ora vediamo le variabili che possiamo usare.

Vi lascio alcuni effetti di entrata e uscita che potrete usare, non fate caso se sono usate per flash, funzionano ugualmente
TransitionCheatSheets.zip.

Questi guida lo sviluppata grazie alla pagina ufficiale dell’autore delle FancyBox