(Mise à jour le 30 janvier 2009 à 13:13)
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 : https://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 :
09c3790f46276e15fdf3e8a4cdab77ae000
09c3790f46276e15fdf3e8a4cdab77ae001
09c3790f46276e15fdf3e8a4cdab77ae002
Voici maintenant comment j’ai codé une image qui doit s’agrandir lorsqu’on clique :
09c3790f46276e15fdf3e8a4cdab77ae003
Vérification faite, ecco ! ça marche. Vous ne 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
merci pour ce petit tuto qui m’a fait connaitre Slimbox un clone de lightbox
joli blog bonne continuation
cordialement
Bonjour et merci pour ce tuto,
Je cherche cependant une information et peut-être pourrez vous m’aider : je souhaiterais personnaliser l’apparence de l’affichage des vignettes dans la création de galeries. J’ai plusieurs images et je voudrais modifier leur espacement et leur alignement. Cependant je n’ai pas trouvé l’emplacement dans le fichier css qui me permettrait d’effectuer ces modifications… Je vous remercie pour votre aide 😉
Bonjour,
Super code, mais problème avec IE9: seul le titre s’affiche dans un cadre de quelques pixels au carré.
Votre expérience me laisse beaucoup d’espoir pour atteindre la solution.
Merci
JeanB
Bonjour,
Merci beaucoup pour ce code dont le résultat est fort sympathique mais:
S’il fonctionne parfaitement avec Mozila Firetox, je n’arrive pas à le faire fonctionner avec Internet Explorer 9 sur notre site.
Peux-tu me dire ce qui ne va pas ?
Par avance merci à toi.
JeanB
Bonjour,
Je suis en train de créer un site et je te remercie énormément pour ce super post qui m’a aidé à enfin agrandir des images.
Je suis néanmoins confrontée à un problème, cela ne fonctionne pas sous IE7, même sur les versions antérieures.
Aurais tu une astuce sur ca!!! je ne trouve absolument rien sur le net.
Merci et bonne journée
Sandra
Bonjour
Merci pour ta doc c’est vraiment génial…
Petite remarque :
« 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 »
Tu m’arrêtes si je dis une bêtise mais il faut mettre le fichier jquery.js dans le répertoire
slimbox/js sinon cela ne fonctionne pas correctement.
Je précise que je code avec Kompozer et que je navigue avec Firefox
A tout cas milles merci pour ce « tuto »
A+++
Bonjour et bonne année Chère Lise,
Eh oui, c’est moi Renaud, à nouveau…
Juste pour info, pour exploiter PREV et NEXT dans son diapo d’image en Slimbox :
<a href="images10/lampe3.jpg" rel="lightbox [mon_repertoire photo]"
REMPLACER [mon_repertoire photo] par le nom du répertoire photo qui est utilisé pour le diapo…au cas où 😉
Biz et encore tous mes voeux de bonheur pour 2011!!!
Bonjour,
Juste un petit mot pour te dire que ton blog est super je cours essayer
Merci
Merci, vraiment, pour cet article qui m’a permis de faire fonctionner une lightbox-like correctement sur mon blog, en local pour l’instant, l’effet est vraiment sympa.
Bonjour,
merci pour cette source, j’ai une petite question, j’ai une page html et dedans jai un swf qui appelle un fichier xml. Dans ce fichier xml j’ai des liens et je voudrais que ces liens ouvrent mes images par slimbox. Le code pour ouvrir l’image je le mets dans mon fichier xml mais ca donne rien. As tu une solution ? merci bcp