Privilège - Agrandir d'un clic une image - Lightbox

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 :

<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/effects.js">
</script><script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/prototype.js">
</script><script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/scriptaculous.js?load=effects">
</script><script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/lightbox.js">
</script><a title="desert" rel="lightbox" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/image-1.jpg"><img alt="" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/thumb-1.jpg" /></a>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/lightbox.css" type="text/css" media="screen" />

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ées dans mon administration et je ne suis pas sûre que les Blogs hors Over-Blog puissent utiliser ces fichiers.

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.

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 ceux 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

#prevLink, #nextLink{    width: 49%;    height: 100%;
    background: transparent url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/blank.gif)
no-repeat; /* Trick IE into showing hover */    display: block;    }
#prevLink:hover, #prevLink:visited:hover { background: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/nextlabel.gif) right 15% no-repeat; }

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

Quatrième étape :

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

Vous recherchez les lignes

var fileLoadingImage = "http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/loading.gif";   
var fileBottomNavCloseImage = "http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/closelabel.gif";

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 de votre article, vous collez ce code :

<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/effects.js">
</script><script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/prototype.js">
</script><script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/scriptaculous.js?load=effects">
</script><script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/lightbox.js">
</script><a title="desert" rel="lightbox" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/image-1.jpg"><img alt="" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/thumb-1.jpg" /></a>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/lightbox.css" type="text/css" media="screen" />

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.