Prettyphoto è un plugin di jQuery che consente di realizzare gallerie fotografiche in stile lightbox.

Oltre alle immagini supporta anche altri tipi di contenuti come video, filmati, documenti e contenuti in linea.

Attenzione: il plugin non funziona correttamente con jQuery 3.x

jQuery PrettyPhoto è compatibile con tutti i browser moderni:

  • Internet Explorer (>6)
  • Chrome (>10)
  • Firefox (>10)
  • Safari (>3.1.1)
  • Opera (>9)

PrettyPhoto è rilasciato con licenza GPLv2 e perciò è liberamente utilizzabile anche per progetti commerciali.

Scaricare e includere i file necessari

Scaricare l’ultima versione di jQuery e di prettyPhoto.

La cartella compressa scaricata dal sito ufficiale di prettyPhoto contiene non solo i file necessari per realizzare la galleria ma anche una demo con alcuni esempi pratici.

Includere, nell’intestazione del documento (elemento head), il foglio di stile di prettyPhoto, jQuery e il file javascript del plugin, come mostrato nel seguente esempio:

<!DOCTYPE HTML>
<html lang="it">
 <head>
   <meta charset="utf-8">
   <title>jQuery PrettyPhoto | Sintesi-Design.it</title>
   <link rel="stylesheet" type="text/css" href="css/prettyphoto.css">
   <script src="js/jquery-1.10.2.min.js"></script>
   <script src="js/jquery.prettyPhoto.js"></script>
 </head>
<body>
</body>
</html>

Alcune regole css del foglio di stile si riferiscono alle immagini utilizzate per l’interfaccia grafica di prettyPhoto.

I percorsi dei controlli di prettyPhoto nel foglio di stile

I percorsi dei controlli di prettyPhoto nel foglio di stile

Le immagini dei controlli di prettyPhoto si trovano nella cartella scaricata in precedenza nel percorso images/prettyphoto. Copiare la cartella delle immagini in una posizione qualsiasi del proprio sito e poi, aggiornare i percorsi nel foglio di stile.

La struttura html della galleria fotografica

Per realizzare la galleria fotografica mostrata nella demo è necessario preparare una serie di immagini. Per ciascuna immagine della galleria preparare:

  • una miniatura, da inserire nel proprio documento
  • l’immagine a dimensione reale da mostrare in prettyPhoto

Le miniature delle immagini possono essere inserite in un qualsiasi contenitore adatto allo scopo (ad esempio, un elemento p o un div). Nell’esempio, le immagini sono contenute in una lista non ordinata (ul).

<ul>
  <li>
    <a href="images/1.png" rel="prettyPhoto[galleria]">
      <img src="images/t1.png" width="100" height="75" alt=" ">
    </a>
  </li>
  <li>
    <a href="images/2.png" rel="prettyPhoto[galleria]">
      <img src="images/t2.png" width="100" height="75" alt=" ">
    </a>
  </li>
<!-- Altre immagini -->
</ul>

L’unico elemento indispensabile è il collegamento all’immagine a dimensione reale (o altri contenuti: video, documenti, …) da mostrare in prettyPhoto.

PrettyPhoto utilizza l’attributo rel, presente nei collegamenti, per distinguere le immagini da visualizzare nella galleria da tutte le altre immagini del documento.

Lo stile

Il foglio di stile importato nelle intestazioni del documento definisce lo stile di prettyPhoto e non quello delle miniature presenti nella pagina che perciò possono essere formattate liberamente.

ul{
   list-style:none;
   width:600px;
   margin: 50px auto;
}
ul li{
   float:left;
   margin-right:20px;
}
ul li img{
   border:none;
}

Nella demo le miniature sono affiancate con la proprietà float e separate tra loro con un margine destro.

Attivare jQuery prettyPhoto

Aggiungere un elemento script alla fine del documento, subito prima del tag di chiusura dell’elemento body, e, al suo interno, digitare il codice mostrato nel seguente esempio.

<script>
$(function(){
  $("a[rel='prettyPhoto[galleria]']").prettyPhoto(); 
});
</script>

In dettaglio, la prima istruzione jQuery ci assicura che il plugin sarà attivato non prima che il documento sia pronto per essere manipolato.

$(function(){

});

La seconda istruzione seleziona gli elementi a con l’attributo rel uguale a prettyphoto[galleria] e attiva il plugin con il metodo prettyPhoto().

$("a[rel='prettyPhoto[galleria]']").prettyPhoto();

Visualizza la demo.

Creare due gallerie nello stesso documento

Per creare due gallerie fotografiche nello stesso documento modificare in parte il contenuto dell’attributo rel per differenziare le immagini delle due gallerie, come si può vedere nell’immagine seguente.

Creare due gallerie fotografiche nello stesso documento

Creare due gallerie fotografiche nello stesso documento

Modificare l’istruzione jQuery in modo che selezioni tutti gli elementi a il cui attributo rel inizi con il valore prettyPhoto. PrettyPhoto raggruppa le immagini di ciascuna galleria in base al valore contenuto nell’attributo rel.

$(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto(); 
});

Nell’immagine seguente sono evidenziate le immagini della seconda galleria fotografica, quelle che nell’attributo rel  hanno il testo gallery2.

Le immagini presenti in una galleria

Le immagini presenti in una galleria

Visualizza la demo.

I temi

L’aspetto di prettyPhoto può essere controllato selezionando un tema tra quelli disponibili o creando un tema personalizzato.

Per utilizzare un tema diverso da quello predefinito indicarlo nel metodo prettyPhoto().

$("a[rel^='prettyPhoto']").prettyPhoto({ theme: 'dark_square'});

Visualizza la galleria con il tema dark_square.

I temi disponibili, oltre a quello predefinito, sono:

  • light_rounded
  • dark_rounded
  • light_square
  • dark_square
  • facebook

Visualizza l’aspetto dei temi disponibili in prettyPhoto.

Le altre opzioni di prettyPhoto

Il metodo prettyPhoto() accetta come argomento un discreto numero di opzioni con cui si può modificare il comportamento predefinito del plugin.

Per abilitare o disabilitare il titolo e la descrizione delle immagini visualizzate usare la proprietà show_title con i valori true o false.

$("a[rel^='prettyPhoto']").prettyPhoto({show_title:false});

La descrizione, il contenuto dell’attributo alt di ciascuna immagine, viene mostrata in alto a sinistra. Il titolo, il contenuto dell’attributo title dell’elemento a,  viene mostrato in basso accanto ai controlli di spostamento.

Impostare il titolo e la descrizione delle immagini

Impostare il titolo e la descrizione delle immagini

La riproduzione automatica (autoplay) della presentazione può essere attivata (o disattivato) con la proprietà autoplay_slideshow.

$("a[rel^='prettyPhoto']").prettyPhoto({autoplay_slideshow:true});

La velocità della transizione e la durata di ogni foto si definiscono con le proprietà: animation_speed e slideshow.

$("a[rel^='prettyPhoto']").prettyPhoto({
  show_title:false,
  autoplay_slideshow:true,
  animation_speed: 'slow', /* fast, slow, normal */
  slideshow: 8000, /* Durata in millisecondi o false */
});

Visualizza la demo

L’elenco completo delle opzioni è disponibile nella documentazione di prettyphoto.