FancyBox

fancybox jqueryLa particolarità di questa "lightbox alternative" sta nella somiglianza con lo stile Mac della finestra modale, oltre a poter scorrere le immagini con la rotella del mouse. Basato sulla libreria javascript jQuery, è leggermente più complesso di altri da configurare.

Versione: 1.3.1 (3/05/10)
Sito ufficiale: fancybox.net
Richiede: jQuery (1.3+)
Download: 125 KB (js + immagini + css + jquery-1.4.2.min)

 

Installazione

Dopo aver scaricato e scompattato FancyBox e jQuery sul vostro sito è necessario includere il seguente codice all'interno del tag <head> della vs pagina:

<script type="text/javascript" src="fancybox/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" />

e verificare il corretto posizionamento dei file immagini e css. Per ogni immagine da zoommare basterà aggiungere l'attributo rel in questo modo:

<a href="big_01.jpg" rel="demo"><img src="small_01.jpg" /></a>
<a href="big_02.jpg" rel="demo"><img src="small_02.jpg" /></a>

ed infine utilizzare il selettore jQuery, ad esempio, come segue:

<script type="text/javascript">
  $(document).ready(function() {
    $("a[rel=demo]").fancybox();
  });
</script>

 

Demo

2 esempi di gallerie fotografiche realizzate con Fancybox: nella configurazione base ed in una delle sue tante versioni personalizzate (provate la rotella del mouse!). Moltissime altre possibilità di personalizzazione le trovate sul sito dell'autore.

 

Per commenti, scriveteci.