Webdev

Mercredi 17 mai 3 17 /05 /Mai 22:56

Sur le blog de Sébastien Delorme  j'ai découvert un lien vers le projet «Lightbox JS» .

«Lightbox JS» est un script qui permet de superposer vos images à votre page active, avec un très bel effet de calque.

Sommaire:

Préambule
Exemple
Téléchargez les fichiers
Uploader les fichiers sur votre espace de stockage
Insérer l'appel au javascript
Mettez à jour votre feuille de style
videz votre cache
Utilisez «Lightbox JS»
Cas pratiques
Liens utiles

 

Préambule

Je me propose, dans cet article, d'expliquer en français comment installer ce script sur vos blog et/ou site et en particulier comment l'installer sur les blogs générés par la plateforme Over-Blog. Vous l'aurez compris je ne suis pas l'auteur de ce script, tout le mérite en revient au développeur du project «Lightbox JS»

Avant de commencer à lire cet article, pensez à vider le cache de votre navigateur Ctrl + F5 si ce n'est pas la première fois que vous venez sur mon blog.

Dernière précision importante pour les Over-Bloguiens, le javascript n'étant pas autorisé en mode confiance, vous ne pouvez pas utiliser «Lightbox JS» si votre blog n'est pas en mode privilège ou premium.

 

Exemple

Cliquez sur les images pour voir en action ce que permet «Lightbox JS» (si une image s'ouvre dans une page blanche, videz le cache de votre navigateur comme précisé en préambule).

Vous êtes au régime?


Non! alors... Une petite envie?


 

«Lightbox JS» fonctionne aussi sur de simples liens!

Pastèque -  Orange sanguine -  Citron vert -  Kiwi -  Orange -  Banane

Sympa, n'est-ce pas? Entrons dans le vif du sujet...

 

Télécharger les fichiers

Pour utiliser «Lightbox JS» vous devez télécharger les fichiers néecessaires au bon fonctionnement du script. Vous pouvez les récupérer directement en cliquant ici puis Enregistrer sous.... Le fichier Zip que vous venez de télécharger comprend:

  • lightbox.js le fichier javascript qui permet l'effet tant recherché,
  • overlay.png un fichier image permettant l'aspect calque,
  • loading.gif un fichier en gif animé simulant la barre de chargement de l'image,
  • et close.gif un fichier image qui simule la croix pour "fermer" le calque.

Vous pouvez bien sûr récupérer directement ces fichiers sur le site du projet cité au début de cet article (et je vous invite à y faire un petit tour). Toutefois, j'ai modifié le javascript afin que les annotations (Cliquez pour fermer, Pressez x pour fermer) soient en français.

 

Uploader les fichiers sur votre espace de stockage

Mettez à disposition les 3 fichiers images dezippés (overlay.png, loading.gif et close.gif) sur votre espace de stockage. Ce peut être: un hébergeur gratuit (Filelodge , esnip , etc.), l'onglet "Fichier" de votre administration Over-Blog, ou par FTP sur le seveur hébergeant votre site perso.

Récupérer l'url des fichiers loading.gif et close.gif afin de les insérer dans le fichier lightbox.js:

1 - ouvrez le fichier lightbox.js avec un éditeur de texte, le bloc-notes par exemple,
2 - cherchez les lignes (vers le début):

Javascript

var loadingImage = 'loading.gif';
var closeButton = 'close.gif';

3 - Remplacez le nom des 2 fichiers par les url complètes que vous avez récupérées,
4 - Enregistrez les modifications,
5 - Uploader ce fichier sur votre espace de stockage.

 

Insérer l'appel au javascript

Insérer, entre les balises <head> et </head> de votre blog le code suivant:

<script type="text/javascript" src="XXX/lightbox.js"></script>

XXX/ correspond à l'url complète du fichier lightbox.js [Pour les webmestres utilisant des adresses relatives, vous savez comment faire].

Les Over-Bloguiens peuvent insérer le code ci-dessus en mode source de leur entête

 

Mettez à jour votre feuille de style

Dans votre CSS rajouter les règles suivantes:

CSS

/*--------- Lightbox -----------*/
#lightbox{
    background-color:#eee;
    padding: 10px;
    border-bottom: 2px solid #666;
    border-right: 2px solid #666;
}

#lightboxDetails{
    font-size: 0.9em;
    color: #555;
    padding-top: 0.5em;
}

#closeButton{ top: 5px; right: 5px; }

#lightboxCaption{ float: left; }

#keyboardMsg{ float: right; }

#lightbox img{ border: none; }

#overlay img{ border: none; }

#overlay{ background-image: url(XXX/overlay.png); }

* html #overlay{ /*Hack IE */
    background-color: #000;
    background-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XXX/overlay.png", sizingMethod="scale");
}
/*-------- fin lightbox -------*/

XXX/ correspond à l'url complète du fichier overlay.png

 

Videz votre cache

Afin que votre feuille de style modifiée soit prise en compte par votre navigateur, vous devez en vider le cache. Allez sur votre blog et appuyez sur les touches Ctrl + F5 de votre clavier. Cette opération est à faire une seule fois. Vos visiteurs ayant déjà visité votre blog devront eux aussi faire cette manipulation, n'oubliez pas de les prévenir si vous voulez qu'ils voient la même chose que vous :)

 

Utilisez «Lightbox JS»... c'est pas trop tôt!

Pour qu'une image s'affiche avec «Lightbox JS», il suffit de rajouter l'attribut rel="lightbox" dans le lien qui doit ouvrir votre image.

Le code complet d'un lien avec cet attribut et de la forme:

HTML

<a href="url-image-à-voir" rel="lightbox">Texte pour afficher l'image</a>

Si vous voulez une légende à votre image, rajouter l'attribut title à votre lien:

HTML

<a href="url-image-à-voir" rel="lightbox" title="Légende de l'image">Texte pour afficher l'image</a>

 

Cas pratiques

Je veux, en cliquant sur cette image,

dont on convient que l'url est http://fruit01.jpg que la même image grand format dont on convient que l'url est http://fruit02.jpg s'ouvre avec l'effet «LightBox JS» et comporte la légende: "La pastèque c'est bon!"

Le code HTML à saisir est le suivant:

HTML

<a href="http://fruit02.jpg" rel="lightbox" title="La pastèque c'est bon!">
    <img src="http://fruit01.jpg" />
</a>

On obtient:

Si on veut la même la chose avec un lien texte indiquant: "Cliquez ici":

HTML

<a href="http://fruit02.jpg" rel="lightbox" title="La pastèque c'est bon!">
    Cliquez ici
</a>

On obtient:

Cliquez ici

Notez que, si comme moi vous êtes feignant, vous pouvez créer le lien avec la barre d'outils de l'éditeur fournit par Over-Blog et juste rajouter l'attribut rel="lightbox" en mode source.

 

Liens utiles

L'effet polaroïd des thumbnails de cet article est réalisé grâce à cet article. La page originale du projet «Lightbox JS» se trouve sur le blog de Lokesh Dhakar . Sachez qu'il existe une version 2.0 de «Lightbox JS»  avec du java, cependant cette version est beaucoup plus lourde en terme de fichier et d'installation, elle permet toutefois de faire des diaporamas.

D'autres liens:

 

Voir les 99 commentaires Publié dans : Webdev
Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus - Articles les plus commentés