jQuery LightBox Plugin

Mon plugin préféré! Principalement utile avec des images ou des galeries, ce plugin est un outil animé de zoom vraiment bien fait et vraiment pratique pour effectuer toute sorte de démonstrations. Source et © Leandro Vieira Pinho.

Démonstration

LightBox avec une image

Cliquez moi pour afficher une image dans une LightBox

LightBox avec une galerie

Implémentation

Avant de commencer à utiliser ce plugin, il faut tout d'abord inclure les fichiers requis dans le header de la page.

Pour la LightBox, ces fichiers sont premièrement la librairie jquery, puis le script du plugin et sa feuille de style:

/** jQuery Inclusion **/
<script type="text/javascript" src="Chemin_vers/jQuery.js"></script>
/** Plugin Inclusion **/
<script type="text/javascript" src="Chemin_vers/lightbox.js"></script>
/** Style requis **/
<link href="Chemin_vers/lightbox.css" rel="stylesheet" type="text/css" />

Ensuite, l'étape suivante consiste à déclarer comment et quand la LightBox sera affichée sur votre page.
Le code qui suit indique que chaque lien doté d'une classe LightBox aura son contenu affiché dans une LightBox.
Il peut être ajouté dans le header de la page ou dans un fichier js à part.

<script type="text/javascript">
  $(document).ready(function(){
    $(".lightbox").lightBox();
  });
</script>

Il ne nous reste maintenant plus qu'à créer un lien ayant une classe LightBox tout en spécifiant dans son attribut href ce que l'on veut afficher dans la LightBox:

<a href="Chemin_vers_target" class="lightbox">Test LightBox Plugin</a>

Comme mentionné au début, ce plugin devient très intéressant quand il est utilisé avec une galerie d'images, pas juste une seule.

Pour obtenir le résultat vu dans la démonstration, nous allons utiliser une approche un peu différent.
L'idée est de regrouper plusieurs liens dans un conteneur, et de spécifier que cet ensemble de lien est en fait notre galerie. Donc premièrement, nous allons créer ces liens et ce conteneur:

<div id="gallery">
  <ul>
    <li><a href="image1.jpg"><img src="thumb_image1.jpg" /></a></li>
    <li><a href="image2.jpg"><img src="thumb_image2.jpg" /></a></li>
    <li><a href="image3.jpg"><img src="thumb_image3.jpg" /></a></li>
    <li><a href="image4.jpg"><img src="thumb_image4.jpg" /></a></li>
    <li><a href="image5.jpg"><img src="thumb_image5.jpg" /></a></li>
  </ul>
</div>