bits4beatsIdee e pensieri di Roberto Rossi

Grazie a jQuery e ai numerosi plugin che circondano questa libreria ora è davvero semplice e divertente realizzare gallerie web leggere e di effetto.

Oggi voglio presentarvi la galleria che ho realizzato per il sito di Giulia sfruttando jQuery e quello che considero il migliore plugin per la realizzazione di gallerie di immagini (e non solo), prettyPhoto.

Dopo aver scaricato il pacchetto dal sito ufficiale del plugin, ho preparato un pò di foto, creando anche gli opportuni thumbnail con mogrify e ho creato una pagina html che gestisse la galleria.

La realizzazione della galleria di foto, dopo aver opportunamente preparato il codice javascript della pagina, è davvero semplice. Si tratta infatti di creare degli elementi a che puntano alle immagini ingrandite che contengono al loro interno degli elementi di tipo img che visualizzano i rispettivi thumbnail.
Gli elementi di tipo a devono essere opportunamente arricchiti da un paio di attributi. L’attributo rel dichiara l’appartenenza della galleria a un determinato gruppo di foto (in sostanza, un album) mentre l’attributo title serve per sottotitolare la foto con una caption.

Ecco il codice html per ogni singola immagine:

         <li>
            <a rel='prettyPhoto[macerata]' title="La salita delle fosse" href='images/macerata_01.jpg' >
               <img src='images/thumb/macerata_01.jpg' width='100' class='thumb' border='0' />
            </a>
         </li>

Per funzionare la pagina, come anticipato, ha anche bisogno di una dichiarazione di librerie javascript in cima alla pagina:

		<script src="http://www.google.com/jsapi" type="text/javascript"></script>
		<script type="text/javascript" charset="utf-8">
			google.load("jquery", "1.3");
		</script>
		<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" />
		<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

e di un’inizializzazione jQuery contestuale al termine del caricamento della pagina stessa:

		<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
		});
		</script>

Ecco la pagina demo che ho realizzato con un pò di fotografie storiche di Macerata e alcune foto della mia labrador Mina.

Il progetto scaricabile è invece in questo link.

Il tema prettyPhoto utilizzato è “facebook”. Ricordo inoltre che prettyPhoto può anche essere utilizzato per visualizzare video, altri siti (tramite iframe) o contenuto html generico.