Top-News.fr

Top-News > Informatique > Lightbox 2 tutoriel - ouvrir ses images dans de jolies pop-up

Lightbox 2 tutoriel - ouvrir ses images dans de jolies pop-up

lightbox2-tutoriel

Lightbox 2 tutoriel :
ouvrir ses images dans de jolies pop-up avec le plugin javascript Lightbox .
Lightbox 2 utilise les librairies javascript : Prototype Framework et Scriptaculous Effects Library .

Pour utiliser Lightbox 2 , il faut tout d' abord aller télécharger la dernière version ( en cliquant sur Download sur cette page )  !!!
Dans le zip téléchargé il y a un exemple d' utilisation de Lightbox .

Une fois notre zip récupéré , il faut dans le head de notre page html inclure les librairies Prototype et Sriptaculous et le plugin LightBox .
On ajoute également la feuille de style nécessaire à Lightbox 2 .

<html>
<head>
<title>Ma page HTML utilise Lightbox</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
...
</body>
</html>

Ensuite dans notre page pour utiliser Lightbox on ajoute aux liens qui doivent ouvrir une image en pop-up l' attribut rel="lightbox" ( le lien pointe vers l' image à ouvrir ).
Voilà le tour est joué . Lightbox fonctionne sur votre page .
Dans cet exemple le lien est placé sur une image qui est une miniature de l' image qui va s' ouvrir dans la pop-up ( ça c' est malin ) .

<body>
<a href="mon-image.jpg" rel="lightbox"><img src="mon-image-mini.jpg" width="100" alt="mon-image" /></a>
</body>

Cliquer ici pour voir un exemple .

On peut personnaliser Lightbox en modifiant les images contenues dans le dossier " images " de Lightbox et en modifiant la feuille de style lightbox.css contenue dans le dossier css .

On peut également créer une galerie avec lightbox sans difficulté en utilisant l' attribut rel de nos liens : voici la syntaxe à respecter .

<a href="image1.jpg" rel="lightbox[nomDeMaGallerie]">ma mini image 1</a>
<a href="image2.jpg" rel="lightbox[nomDeMaGallerie]">ma mini image 2</a>
<a href="image3.jpg" rel="lightbox[nomDeMaGallerie]">ma mini image 3</a>

( on aura les liens suivant et précédent dans la pop-up pour naviguer dans la gallerie ) .

plus de news sur Lightbox 2 tutoriel - ouvrir ses images dans de jolies pop-up

dans les dossiers : • Informatique

Commentaire

  1. Thom

    Simple et clair, merci, ça m’a été très utile !

    Posté le 16 mai 2010

Votre avis sur le billet : Lightbox 2 tutoriel - ouvrir ses images dans de jolies pop-up