Geek Help Me ! Tutoriels, Dossiers, News...

Après avoir recherché un script de lightbox pour l'affichage des images dans un de mes projets, je me suis naturellement tourné vers SlimBox 2 de Christophe Beyls clone de la très populaire lightbox 2.

Pourquoi choisir Slimbox 2 plutôt que la vénérable Lightbox ?
La mise en place des deux scripts étant exactement identique, J’ai opté pour Slimbox 2 pour la simple et bonne raison que ce script est plus léger que son principal concurrent (5Ko contre 18Ko).

C’est ainsi que j’ai découvert et l'honneur de vous présenter, à vous lecteur de GHM, le script SlimBox 2.

Pour faire fonctionner ce script, tout dabord, vous avez besoin de télécharger le fichier jquery-1.3.1.min.js de la libraire jQuery, composant nécessaire au bon fonctionnement de SlimBox.

Télécharger jQuery à l’adresse : http://docs.jquery.com/Downloading_jQuery

Puis télécharger le script Slimbox 2 à l’adresse : http://www.digitalia.be/software/slimbox2

Pour mettre en place la lightbox, rien de plus simple, ajouter les lignes suivantes dans le header de votre page :

<script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript" src="/js/slimbox2.js"></script>

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

Lightbox simple :

Puis pour ajouter l’effet de lightbox sur votre image ajouter le lien de la façon suivante :

<a href="/Lien/vers/votre/images.png" rel="lightbox"><img src="/Lien/vers/votre/images.png " /></a>

Si vous souhaitez ajouter du texte à la lightbox vous devez ajouter le texte à l’aide de la propriété title du tag <a>.

<a href="/Lien/vers/votre/images.png" rel="lightbox" title="Texte à afficher dans la lightbox"><img src="/Lien/vers/votre/images.png " /></a>

Lightbox avec diaporama :

Vous souhaitez ajouter une effet lightbox avec diaporama (possibilité de naviguer entre chaque image via un lien suivant ou précédent).

La méthode est tout aussi simple que pour ajouter un simple effet lightbox. Au lieu de saisir rel="lightbox" dans le tag <a>, il suffit de mettre rel="lightbox-votrecat" ou votrecat correspond à un diaporama bien distinct.

Voici un exemple :

<a href="/Lien/vers/votre/image1.png" rel="lightbox-cat" title="Image 1"><img src="/Lien/vers/votre/image1.png " /></a>

<a href="/Lien/vers/votre/image2.png" rel="lightbox-cat" title="Image 2"><img src="/Lien/vers/votre/image2.png " /></a>

<a href="/Lien/vers/votre/image3.png" rel="lightbox-cat" title="Image 2"><img src="/Lien/vers/votre/image2.png " /></a>

Pour toute questions, n’hésitez pas à venir poster sur notre forum dans la catégorie développement.