Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
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é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

#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 de votre administration

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/HTML 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.

MàJ : Janvier 2009
Voir les 27 commentaires - Ecrire un commentaire
Recommander
Retour à l'accueil

Présentation

: Les ficelles d Anna K.
: 26/06/2006
annak : Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer de la musique, des gadgets, des compteurs, des astuces de référencement...

Recherche Rapide Sur le Site

Commentaires

Publicité

Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus