Je viens de remarquer à mes dépends qu'elle est peut-être incompatible avec Google Analytics.
Regardez d'abord la démo pour vous faire une idée.
Allez sur ce site et télécharger le fichier .zip et dézippez le dans votre ordinateur.
Déposez les images du dossier "images" sur votre blog.
Ouvrez le fichier lightbox.js situé dans le dossier "js" et collez le dans le bloc-note windows. Il y a deux petites choses à changer. Trouvez le bout de code suivant (il est vers le tout début) et changez le de cette façon :
//Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: 'http://votreblog.cowblog.fr/images/loading-copie-1.gif',
fileBottomNavCloseImage: 'http://votreblog.cowblog.fr/images/closelabel.gif',
overlayOpacity: 0.8, // controls transparency of shadow overlay
...
Trouvez un site de stockage (comme ArchiveHost) et mettez y les 5 fichiers qui se trouvent dans le dossier "js".
Copiez ce code dans une page statique :
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/130850153467357179/prototype.js"></script>
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/130850153467357179/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/130850153467357179/lightbox.js"></script>
Ouvrez le fichier situé dans le dossier "css" et collez son contenu dans votre feuille de style.
Nous avons fait le plus dur. Il ne reste plus qu'à créer une miniature de votre image, de déposer la miniature et l'image d'origine sur votre blog et de coller ce code dans la page statique, à la suite des scripts :
<a title="Titre de la photo" rel="lightbox[galerie]" href="http://votreblog.cowblog.fr/images/imageorigine.png"><img style="" alt="http://cow-vault.cowblog.fr/images/miniature.png" src="http://cow-vault.cowblog.fr/images/miniature.png" /></a>