LightBox, le javascript pour vos images

16 mar

Mots-clefs :Framework, Javascript, Lightbox, Prototype, Scriptaculous, Web 2.0

LightBox

Aujourd’hui je vais vous présenter une librairie Javascript (et oui … encore !).
Il s’agit de LightBox, le plugin de référence pour vos images.

En faite cette librairie permet d’ajouter, sur les liens des agrandis de vos images, un effet d’agrandissement sur la même page.

Cette librairie fonctionne sur la base de Prototype et de Scriptaculous (2 librairies que je vous ai déjà présenter précédemment).

Voici un exemple

Comme tu as pu voir, l’effet proposé fait très professionnel et en plus si vous avez une galerie d’image, tu vas voir apparaitre « Suivant» ou « Précédent» pour naviguer entre les images.

Voici comme utiliser cette librairie :

Il faut dans un premier temps inclure les 3 fichiers obligatoires au bon fonctionnement de cet effet .

Ensuite, il faut inclure le fichier CSS de le lightbox.

N’oubliez pas de vérifier le positionnement des images (si elles sont pas bien dans le bon répertoire).

Ensuite, tu doit ajouter une (ou deux) petite(s) propriété(s) CSS sur les liens de vos images :

Ici ce qui est important c’est le rel=» lightbox» et le title=» Le titre de l’image» .La propriété rel permet d’activer le script javascript et le title permet d’ajouter une petite légende dans la boite de l’image.

Si vous avez une galerie il faut ajouter a toutes les images un rel (encore) mais légèrement différent :