Création et affichage d’une galerie sous Lightbox2 Plugin

(Mise à jour le 3 octobre 2007 à 12:06)

Pour l’affichage dynamique des images sur mon blog, j’utilisais jusqu’ici le plugin Thickbox.

J’ai dû y renoncer dernièrement car, suite à l’upgrade de WordPress en 2.3, et, par effet de réactions en chaîne, à l’upgrade de K2, le thème que j’utilise sur mon blog, Thickbox ne fonctionnait plus.

J’ai cherché et trouvé un plugin équivalent. Il s’agit de Lightbox2.
Comparativement à Thickbox, Lightbox2 offre diverses possibilités de configuration supplémentaires (à régler, sous WordPress, dans la rubrique Options/Lightbox Options) : Resizing-Animation ; Resizing-Animation Speed ; Background Opacity ; Border Size ; Filter Images in Posts ; Filter Images in Excerpt ; Filter Images in Comments.

 

• 1. Installation de Lightbox2
  Classiquement, Lightbox2 doit être installé dans le répertoire wp-content/plugins/, puis activé dans la section Plugins du Dashboard (interface d’administration) du blog.

 

• 2. Principe d’utilisation de Lightbox2
  Pour obtenir l’effet Lightbox (affichage dynamique de l’image sur fond grisé), il suffit du bout de code suivant : rel= »lightbox ». Celui-ci permet de relier, dans le cadre d’une sorte de boîte de projection lumineuse virtuelle, deux formats d’image : le format 100% (full) et le format miniaturisé (thumbnail).

 

• 3. Application aux images traitées sur le mode single
  Pour appliquer l’effet Lightbox aux images traitées sur le mode single (une image par ligne), voici, en matière de code, la formule-type, à saisir directement dans la fenêtre d’édition :

 

class= »alignleft » height= »36″ width= »414″ constituent des variables d’alignement et de taille.
« alignleft » (aligner à gauche) peut être remplacé par « alignright » (aligner à droite) ou « aligncenter » (centrer).
height= »36″ width= »414″ définissent ici la hauteur (height) et la largeur (width) de la miniature, librement définies par l’utilisateur pour chacune des images.

Pour un bon positionnement de l’image dans le flux du texte, après les lignes de code relatives à l’image ou après le paragraphe dans lequel s’insère l’image, il faut ajouter la ligne de code ci-après :

 

4. Application aux images traitées sur le mode galerie
Pour appliquer l’effet Lightbox à une galerie (suite d’images présentées sur une ligne, ou plusieurs lignes, ou plusieurs pages), procédez de la manière suivante :
– choisissez le nom que vous attribuerez à cette galerie et créez dans wp-content/uploads/ un dossier à ce nom.
– transférez votre suite d’images dans le dossier nouvellement créé. Si vous avez créé un dossier « fleurs », vos images se trouvent maintenant dans wp-content/uploads/fleurs ».
– saisissez ensuite, conformément à l’exemple ci-dessous, les lignes de code nécessaires à l’affichage de la galerie (ici, galerie de 2 images) :

 

– ajoutez enfin, après les lignes du code image, ou à la fin du paragraphe dans lequel figure la galerie, la ligne de code « clear » :

 

5. Désactivation sélective de l’effet Lightbox
Pour soustraire une image, un post ou une page à l’effet Lightbox :
– une image : ajoutez au code de l’image l’attribut suivant : {nolb}

 

– un post ou une page : saisissez, n’importe où dans le corps du texte, la ligne de code suivante :

 

Very nice, l’effet Lightbox. Amazing features 🙂

Ecrit par Christine - Site