ColorBox, une lightbox jQuery légère et extensible

1 février 2012

ColorBox est un plugin jQuery qui permet de générer une lightbox légère et totalement personnalisable pour accueillir photos, textes ou vidéos. Avec plus de quarante options disponibles, ColorBox s’inscrit dans la lignée des meilleurs générateurs de « pop-in ». Facile à utiliser, c’est aussi un des plugins jQuery les plus utilisés sur Internet.

Un plugin léger et complet

Au même titre que Fancybox, ColorBox est un plugin de qualité. Le script est particulièrement léger, à peine 10KB, et supporte tous les types de contenu possibles : photo, galerie d’images, vidéo, flash, contenu chargé en AJAX, simple texte, ou encore iframe. Une feuille de style et pas moins de quarante options sont disponibles pour vous permettre de personnaliser au mieux votre lightbox. Côté compatibilité, difficile de faire mieux : tous les navigateurs supportent le plugin, IE6 compris.

Parmi la multitude d’options, vous retrouverez le type de transition (« fade », « elastic » ou « none »), la vitesse d’animation, l’insertion d’une légende, les boutons de navigation, le degré d’opacité du background, les dimensions de la lightbox, l’activation du diaporama, ou encore la navigation au clavier. Du côté des méthodes, quelques fonctions de callback et de points d’ancrage événementiels sont également présentes. Bref, ColorBox est plus que complet !

Facile à mettre en place

ColorBox est très simple à utiliser. On commence par déclarer la structure HTML qui nous intéresse, par exemple une liste de liens qui pointent chacun sur une image. Ainsi, lorsqu’on cliquera sur un lien, l’image qui lui est associée s’ouvrira dans une lightbox.

<ul>
  <li><a class="lightbox" rel="gallery" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></li>
  <li><a class="lightbox" rel="gallery" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></li>
  <li><a class="lightbox" rel="gallery" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></li>
</ul>

Une fois la structure prête, on déclare jQuery et le plugin (script et feuille de style) dans notre document. On peut alors faire appel à la fonction colorbox(). Dans cet exemple, on sélectionne tous liens disposant de l’attribut « rel » pour générer une lightbox contenant une galerie d’images. Ainsi, nous pourrons basculer d’une image à l’autre tout en restant dans la même lightbox.

$('a.lightbox').colorbox({rel:'gallery'});

Il existe de nombreux plugins jQuery qui proposent de la génération de lightbox. ColorBox est de loin (avec FancyBox) le plugin le plus abouti dans ce domaine avec un script léger, facile à prendre en main et qui possède une grande variété de paramètres pour mettre en place des lightbox personnalisées et compatibles sur tous les navigateurs.

Requis : jQuery
Compatibilité : Firefox, Chrome, Internet Explorer 6+, Opera 11+, Safari
Démonstration : http://jacklmoore.com/colorbox/
Licence : MIT

Commentaires

  • Mimine

    Effectivement, le plugin est très complet et mérite d’être posté sur Megaptery ^^ Je l’ai utilisé sur de nombreux projets et le recommande vivement.

  • très bon plugin !
    Je connaissais pas, et la mise en forme est vraiment sympa je trouve.
    merci pour la découverte

  • Une alternative LightBox pour jQuery efficace.
    Intégré dans un site il y a qq temps et rien à redire, ca fonctionne bien et de partout (bureau et mobile iOs & WP7)

  • Dede

    je n’y arrive pas….

  • L Petillon

    une question cependant : comment inclure les titres des images quand celles-ci ne figure pas sur la page html ? en claire, j’ai une image cliquable ouvrant une galerie lightbox et je veux que les images ai bien leur titre :-/ Merci d’avance !

    • L Petillon

      j’ai remarqué également, que la lightbox affichait toutes les images de la page tout dossier confondu.
      comment régler celà ? est-ce avec l’attribut « rel » ? si oui, où trouver la ligne pour le modifier.

      Merci encore

      • Je te conseille de regarder le code source de la page de démonstration : http://www.jacklmoore.com/colorbox/example1/. Les groupes sont gérés via le paramètre « rel » qui correspond à la classe CSS commune à chaque lien. Les titres sont gérés via l’attribut « title » de chaque lien.

  • Babble

    Application très sympa et bien pensée. Par contre les légendes sur plusieurs lignes ne sont bien prises en charge… ( le texte remonte sur la photo)