Créer une lightbox avec jQuery
Je vous propose de voir comment créer un lightbox simple avec jQuery pour mettre en valeur vos images.
Dans ce tutoriel, nous allons créer une mini galerie et définir une fonction qui s’activera au clic sur une miniature.
Vous pouvez voir la démo ici et télécharger les fichiers de la démo ici.
Préparatifs
Avant de commencer, téléchargez la dernière version de la librairie jQuery (la version 1.3.2 pour ce tutoriel).
HTML
Dans votre fichier html entre les balises <head> et </head> insérez :
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<style>
#lightbox{
color:#000;
font-family:Helvetica, Arial, sans-serif;
font-size:10px;
text-align:right;
}
</style>
Créez ensuite une liste de liens images dans le body :
<ul> <li><a href="image1.jpg"><img src="min/image1.jpg" width="75" height="100" alt="Fleurs" /></a></li> <li><a href="image2.jpg"><img src="min/image2.jpg" width="100" height="75" alt="Cathédrale" /></a></li> <li><a href="image3.jpg"><img src="min/image3.jpg" width="100" height="75" alt="Monde citadin" /></a></li> </ul>
On insère ensuite le div qui nous servira de lightbox :
<div id="lightbox"> <div id="bouton_fermer">Fermer</div> <div id="lightbox_image"></div> </div>
Javascript
Pour masquer la lightbox dès l’ouverture de la page, insérez entre les balises <head> et </head> :
<script type="text/javascript" language="javascript">
$(function(){
$("#lightbox").hide();
}
</script>
Notre lightbox aura un bouton de fermeture, nous définissons donc la fonction qui permettra de masquer correctement la lightbox :
$("#bouton_fermer").css({cursor:"pointer"})
.click(function(){
$("#lightbox").hide();
})
Et enfin à chaque lien de la liste, nous attribuons une lightbox :
$("ul a").each(function(){
//On récupère ici l'URL de chaque lien
var imageURL = $(this).attr("href");
//Lorsque l'on clique sur un lien, on affiche
//la lightbox
$(this).click(function(){
var monImage = new Image();
//load() déclenche l'execution d'unefonction
//à la fin du téléchargement. Elle est très
//utile pour la réalisation d'un preloading
$(monImage).load(function(){
//Pour pouvoir centrer la lightbox, il
//nous faut récupérer les dimensions de
//l'image à afficher
monImageW=this.width;
monImageH=this.height;
//On définit le css de la lightbox pour
//la centrer dans la page
$("#lightbox").css({
position:"absolute",
top:"50%",
left:"50%",
marginLeft:-monImageW/2,
marginTop:-monImageH/2
}).show();
$("#lightbox_image").empty().append(this);
})
.attr("src",imageURL);
return false;
})
});
