Clone de lightbox pour jQuery

Il faut l'avouer, on aime tous le look and feel des diaporamas photos JavaScript comme Lightbox. Depuis, l'idée à été reprise maintes fois en différentes implémentations (dont Lightbox 2, ThickBox, Slimbox 2, pour ne nommer que ceux là) pour Prototype, jQuery et autres frameworks JavaScript.

Le plus complet à ce jour demeure Shadowbox qui est beaucoup plus évolué et qui peut être utilisé sur une base Prototype, jQuery, Mootools, YUI, Dojo ou Ext. Comme il est très professionnel, c'est pour cette raison qu'il est maintenant payant si on veut en faire un usage commercial (rassurez-vous, une licence multi-développeurs ne coûte que 50$ US, sinon c'est gratuit pour les autres types de projets). Fait notable, la librairie Shadowbox a été écrite par un développeur californien du nom de Michael Jackson (à son grand malheur)...

Par contre, je vais délaisser pour aujourd'hui les librairies les plus populaires pour vous introduire à un autre visualiseur d'images et de vidéos, cette fois en tant que plugin de jQuery : prettyPhoto. Pourquoi celui-ci en particulier ? Parce qu'il a été développé ici, par un programmeur de Montréal (Québec) du nom de Stéphane Caron (que je ne connais pas du tout en passant) et je voulais tout simplement saluer son initiative et son excellent travail.

Pour l'installer, suivez ces quelques étapes faciles :

Inclure jQuery et le plugin prettyPhoto

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>

Inclure la feuille de style CSS

<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="screen" />

Ajouter aux liens la référence à prettyImage à l'aide de l'attribut "rel". Si la photo doit s'afficher seule, on indique uniquement rel="prettyPhoto", si c'est dans le contexte d'une galerie, on indiquera entre crochets le nom de référence qui permet le regroupement (comme l'exemple ci-dessous).

<a href="images/fullsize/001.jpg" rel="prettyPhoto[my_slideshow]" title="Description">
<img src="images/thumbnails/001.jpg" alt="Titre" />
</a>

<a href="images/fullsize/002.jpg" rel="prettyPhoto[my_slideshow]" title="Description">
<img src="images/thumbnails/002.jpg" alt="Titre" />
</a>

<a href="images/fullsize/003.jpg" rel="prettyPhoto[my_slideshow]" title="Description">
<img src="images/thumbnails/003.jpg" alt="Titre" />
</a>

Au chargement de la page, initialisez le diaporama avec une configuration semblable à la suivante :

$(document).ready(function(){

   $("a[rel^='prettyPhoto']").prettyPhoto({
       animationSpeed: 'fast',
       padding: 40,
       opacity: 0.5,
       showTitle: true,
       allowresize: true,
       counter_separator_label: '/',
       theme: 'dark_rounded',
       callback: function(){}
   });

});

Le plugin prettyPhoto est compatible avec l'affichage de photos, seules ou par galeries, le contenu Flash, iFrame (page externe), vidéos (.mov) et YouTube. Bien que 4 thèmes soient disponibles, le seul défaut que je vois se trouve dans les rares traductions car le texte est contenu dans les images et elles sont exclusivement en anglais (pour l'instant ?). Une amélioration future souhaitée serait d'avoir une version simplifiée avec des icônes seulement, où le texte pourrait être remplacé par des tooltips.