Lightbox : la pop up sans sucre

Lightbox est un petit script javascript basé sur prototype et scriptaculous permettant d’ouvrir (notamment) une image dans une fausse pop up.

Première étape, télécharger les fichiers nécessaires.

Passons aux choses sérieuses :

Script html

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

Ca, c’est à placer dans le head de votre page. On appelle les fichiers javascript nécessaires.
Attention à pas recopier bêtement : pensez à modifier les chemins relatives selon où vous mettez les fichiers.

Script html

<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />

Hop, dans le même principe, on appelle le css spéciale lightbox. Même topo, attention aux urls, ce qui vaut aussi pour le repertoire images. Si vous n’avez pas la petite croix “Close” sur votre lightbox c’est que c’est le bordel dans vos repertoires et que la css ne les trouve plus. N’hésitez pas le cas échéant à faire un bon petit coup de rechercher/remplacer dans la css et le js pour régler le problème

Script html

<a href="images/img.jpg" rel="lightbox" title="le titre de mon image"><img src="images/img_thumb.jpg" alt="le nom de la miniature" /></a>

C’est aussi simple que ça. Ici on a appliqué “le lien lightbox” sur une miniature mais vous êtes libre de l’appliquer comme bon vous semble. Le title sera le texte que l’on retrouvera sous l’image.

En concret, cela donne :