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 a été testé sous Firefox, Opera et Safari. 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.

Le code HTML simplifié

Par rapport à la lightbox dynamique universelle, le code à été très simplifié. On peut supprimer le bouton close puisqu'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="shadowing">
<div id="box">
    <div id="boxcontent"  onclick="closebox()"></div>  
    <div id="boxtitle"> Nom de l'image</div>
</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 utilisés, et l'on a modifié (c'est une option) la position de boxtitle et boxcontent.

Le code JavaScript n'a pas changé par rapport à la version précédente. On inclut deux liens dans la page:

  <link type="text/css" rel="stylesheet" href="lightbox-image.css">
  <script src="lightbox-image.js" type="text/javascript"></script>

Démonstration

Pour afficher une image dans la lightbox, cliquer sur la vignette correspondante...

Téléchargements...

• Lightbox. Archive contenant toutes les démos de lightbox dont la version simplifiée pour des images.
• Thumbnail Maker. Un script PHP qui est utilisé pour réaliser les vignettes d'image de qualité.