Voici une Lightbox :


Cliquez sur l'image. C'est chouette, non ?

VERSION SIMPLIFIEE :

Cette version est à destination des blogs Over-blog. J'ai modifié et hébergé tous les fichiers.

Il vous suffit de copier ce code et de le coller en mode source de votre article :

La seule chose que vous avez ensuite à faire est de modifier ce qui est en couleur :

http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/image-1.jpg : l'adresse de votre image en grande taille
http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/thumb-1.jpg : l'adresse de cette même image en taille réduite (celle qui apparaîtra directement dans l'article.
desert : le nom de cette image, il apparaîtra sous la grande image

---

VERSION DETAILLEE :

Ces fichiers sont hébergés dans mon administration et ne peuvent pas être utilisés par des blogs hors OB.

Voici donc l'explication détaillée :

Première étape : allez sur HUDDLETOGETHER

 

Cliquez sur



Vous enregistrez ainsi un fichier .zip : c'est-à-dire un ensemble de fichiers compressés dans un seul fichier.

Avec un logiciel de décompression - j'utilise WinRAR - j'ouvre ce fichier Zip : Lightbox 2.03.3.zip

Je copie tous les fichiers qui y sont contenus dans un nouveau dossier que je nomme LIGHTBOX

Deuxième étape : dans votre administration, là où vous stockez vos photos, documents  (Documents - Autres Fichiers pour OverBlog),

• vous créez un répertoire que vous nommez LIGHTBOX

• dedans, vous y enregistrez les fichiers suivants en prenant soin de bien garder les mêmes nom et extension aux fichiers:

Vous remarquez que vous n'enregistrez pas les fichiers lightbox.CSS et lightbox.js

Les fichiers image-1.jpg et thumb-1.jpg sont des images qui servent à cet exemple : ils ne sont donc pas indispensables.

Troisième étape :

Vous ouvrez votre Bloc-Note sur votre PC et appelez le fichier lightbox.CSS.

Vous allez trouver au milieu des autres lignes, celles-ci


Vous allez modifier ce qui est en rouge avec vos propres adresses d'images : vous venez de les sauvegarder dans votre administration.

Vous sauvegardez ce fichier toujours sous le même nom : lightbox.CSS

Vous pouvez maintenant le sauvegarder avec les autres dans le répertoire LIGHTBOX de votre administration

Quatrième étape :

Toujours dans le Bloc-Note, vous ouvrez le fichier lightbox.js

Vous recherchez les lignes


Vous les modifiez avec vos propres adresses d'images.

Vous sauvegardez ce fichier toujours sous le même nom : lightbox.js

Vous pouvez maintenant le sauvegarder avec les autres dans le répertoire LIGHTBOX

Cinquième étape :

En mode source/HTML de votre article, vous collez ce code :


La seule chose que vous avez ensuite à faire est de modifier ce qui est en couleur : les adresses des fichiers et des images

http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/effects.js
http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/prototype.js
http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/scriptaculous.js?load=effects : attention à ne pas oublier ?load=effects
http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/lightbox.js
http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/image-1.jpg : l'adresse de votre image en grande taille
http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/thumb-1.jpg : l'adresse de cette même image en taille réduite (celle qui apparaîtra directement dans l'article.
desert : le nom de cette image, il apparaîtra sous la grande image
http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/lightbox.css

J'espère avoir été claire : les seules explications que j'ai trouvé étaient en anglais ou trop compliquées.