prettyPhoto

Eventuale titolo di esempio Titolo di esempio 2

Cos'è Prettyphoto?

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.

jQuery PrettyPhoto è compatibile con tutti i browser moderni, di seguito un elenco dei browser supportati:

Internet Explorer Chrome Firefox Safari Opera
> 6 > 10.0 > 3 > 3.1.1 > 9


Scaricare e includere i file necessari

Dopo aver scaricato e scompattato prettyPhoto è necessario includere il seguente codice all'interno del tag della vs pagina e verificare il corretto posizionamento dei file immagini e css.
Le immagini dei controlli di prettyPhoto si trovano nella cartella scaricata in precedenza nel percorso images/prettyphoto. Se si desidera si potrà copiare la cartella delle immagini in una posizione qualsiasi del proprio sito e poi, aggiornare i percorsi nel foglio di stile.
<script src="js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

La struttura html della galleria fotografica

Per realizzare la galleria fotografica mostrata nella demo in cima alla pagina, è necessario preparare una serie di immagini.
Per ciascuna immagine della galleria preparare: una miniatura, da inserire nella propria pagina web e 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). Per ogni immagine basterà aggiungere un link all'immagine di dimensione reale unendole con l'attributo rel in questo modo: rel="prettyPhoto[gallery1]" PrettyPhoto utilizza l’attributo rel, presente nei collegamenti, per distinguere le immagini da visualizzare nella galleria da tutte le altre immagini del documento.
<a href="img/immagine1.jpg" rel="prettyPhoto[gallery1]"><img src="img/thumbs/immagine1.jpg" border="0" alt="Eventuale titolo di esempio"></a>
<a href="img/immagine2.jpg" rel="prettyPhoto[gallery1]"><img src="img/thumbs/immagine2.jpg" border="0"></a>
<a href="img/immagine3.jpg" rel="prettyPhoto[gallery1]" ><img src="img/thumbs/immagine3.jpg" border="0" alt="Titolo di esempio 2"></a>
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 type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").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.
La seconda istruzione seleziona gli elementi a con l’attributo rel uguale a prettyphoto[gallery1] e attiva il plugin con il metodo prettyPhoto().