Lightbox pour afficher des images

En spécialisant la lightbox pour afficher uniquement des photos, il est possible d'obtenir un code plus simple.

Le code source modifié

Par rapport à la lightbox dynamique universelle, le code à été très simplifié. On peut supprimer le bouton close: il suffit de cliquer sur l'image pour fermer la boite. Ce n'est évidemment pas possible si celle-ci contient un texte avec des liens ou un formulaire...

<div id="filter">
<div id="box">
    <div id="boxcontent"  onclick="closebox()">  
    <div id="boxtitle"> Nom de l'image
</div>

Le titre contenant le nom de l'image a également été placé en bas de la photo.
L'évènement onclick est maintenant associé au contenu.

Dans le code CSS on a supprimé les descripteurs des <div> qui ne sont plus utilise, et l'on a modifié (c'est une option) la position de boxtitle et boxcontent.

Le code JavaScript n'a pas changé.

Compatibilité

Le code a été testé sous Firefox 2, Internet Explorer 7, Opera 9 et Safari 3. Le rendu est un peu différent. Sous Firefox et Safari, le texte apparaît sous l'image, il est à l'intérieur du cadre avec les autres navigateurs.

La démonstration

• Voir la démo de lightbox d'images.
• Le code CSS.
• Le code JavaScript.

Télécharger

• Lightbox d'images. Archive contenant le script et la démo.
• Thumbnail Maker. Ce script PHP qui est utilisé pour réaliser les vignettes d'image de qualité n'est pas inclus dans l'archive.

(c) 2008 Xul.fr
Licence: Vous êtes libre d'utiliser le code de ces tutoriels pour motoriser votre propre site. Soyez aimable de ne pas placer les tutoriels ou autres fichiers sur un autre site, placez plutôt un lien sur l'article. Mais vous pouvez imprimer les pages et les distribuer avec le code à des fins d'enseignement.