Intégrer une Slimbox à ses pages Web

Habituée à user de l'effet Lightbox - "Cliquez sur les images pour les agrandir" - sur La dormeuse blogue, blog sous WordPress, j'ai eu envie de reproduire ce type d'effet sur mon site La dormeuse. Il s'agit d'un site que j'ai créé moi-même en HTML, puis converti en PHP, sans me soucier alors de l'effet Lightbox. J'ai cherché sur Internet comment intégrer cet effet, je me suis procuré les fichiers nécessaires, et je me suis lancée.

A la vénérable Lightbox, j'ai préféré l'actuelle Slimbox 2, "the ultimate lightweight Lightbox clone", qui fonctionne de la même manière que la Lightbox, mais qui est plus légère, comme le nom l'indique : 4 ko. Conformément au mode d'emploi de la Slimbox 2, j'ai téléchargé également la jQuery javascript library dont celle-ci a besoin pour fonctionner : il s'agit du fichier nommé "jquery-1.3.1.min.js". J'ai dézippé ensuite le fichier "Slimbox 2", renommé simplement "slimbox" le répertoire ainsi décompressé ; j'ai renommé le fichier "jquery-1.3.1.min.js" en "jquery.js", puis glissé le fichier "jquery.js" dans le répertoire "slimbox". Enfin, j'ai transféré ce répertoire "slimbox" sur mon site, soit à l'adresse suivante : http:belcikowski.org/la_dormeuse/

Une fois que la Slimbox est en place, il ne reste plus qu'à ajouter 3 lignes de code dans le header et à adapter le code HTML des images.

Voici les trois lignes de code que j'ai ajoutées dans mon header, juste avant la balise de fin du header :

<script type="text/javascript" src="slimbox/js/jquery.js"></script>

<script type="text/javascript" src="slimbox/js/slimbox2.js"></script>

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

Voici maintenant comment j'ai codé une image qui doit s'agrandir lorsqu'on clique :

<a href="images10/lampe3.jpg" rel="lightbox" <img src="images10/lampe3.jpg" class="alignleft" height="427" width="320" /></a>

Vérification faite, ecco ! ça marche. Vous le verrez pas tout de suite sur La dormeuse, car je n'ai pas encore terminé l'article qui, pour la première fois sur ce bon vieux site, profitera de l'effet Slimbox. Mais il suffit d'attendre quelques jours.

Ecrit par Christine - Site