23/04/10

La Lightbox est une façon d'organiser une galerie esthétique, pratique et dynamique, et il est tout à fait possible de l'installer sur Cowblog, même si c'est un peu fastidieux.
http://cow-vault.cowblog.fr/images/ICONS/warning16.pngJe 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
...

Enregistrez ce fichier en le nommant lightbox.js à la place de celui que vous avez téléchargé.
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>

Changez les parties en bleu en les adaptant avec vos propres fichiers que vous venez de déposer sur le site de stockage.

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>

[galerie] sert à créer un lien entre toutes les images et à pouvoir passer d'une photo à l'autre en un clic. Par exemple, vous voulez créer une galerie sur vos photos prises à la montagne, il suffit d'insérer [montagne] de la même façon que [galerie].
Par Tote le 23/04/10
Oh Aguie comme tu es cool !
Par Axel le 24/04/10
J'ai beau essayer depuis ce matin, je n'arrive pas à le faire fonctionner entièrement. Je ne vois pas l'animation de la fenêtre quand je clique sur le lien, je me demande si dans ton code javascript il ne manque pas les liens du effets et du builder parce qu'il apparait dans ton code sur ce blog. C'est peut-être une erreur de mon côté: http://axel.cowblog.fr/plugin/pages/3308.html
Par cafard-naum le 24/04/10
Alors.. Non, mon code fonctionne. Je pense que tu as simplement copié et collé le code à retrouver dans le fichier lightbox.js, alors qu'il faut juste trouver le bout de code et modifier l'adresse de l'image. Préviens moi si ça marche ou non, histoire que je vois si mon article provoquera des arrachages de cheveux chez d'autres x)
Par clignotants le 01/08/11
Arrachage de cheveux chez moi !
Je crois avoir tout suivi à la lettre, mais ça marche pas...
http://www.louisemarkise.com/plugin/pages/5168.html
Par Code Uber 20 Euros le 05/09/15
Avez vous un lien pour que je puisse télécharger l'article en PDF ?
Excellent article je vous soutient .
 

Ajouter un commentaire









Commentaire :








Votre adresse IP sera enregistrée pour des raisons de sécurité.
 

La discussion continue ailleurs...

Pour faire un rétrolien sur cet article :
http://cow-vault.cowblog.fr/trackback/2989440

 

<< < | 1 | 2 | > >>

Créer un podcast