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

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

    Un commentaire

    Ecrire un commentaire»
    1. […] Création et affichage d’une galerie sous Lightbox2 Plugin Le blog de Lise […]

    Laisser un commentaire

    Votre adresse mail ne sera jamais rendue publique ni utilisée.

    *Si vous écrivez un commentaire ici pour la première fois, celui-ci ne sera publié qu'après validation par un administrateur du blog. Ne l'envoyez pas plusieurs fois !
    *Bien sûr, tout commentaire injurieux, publicitaire ou spam sera supprimé.
    *C'est à vous maintenant !

    (obligatoire)
    (obligatoire)

    Laisser ces deux champs tels quels :

    Protégé par Invisible Defender.


    • Mentions légales
      Les différents éléments du Blog de Lise restent la propriété de leur(s) auteur(s) respectif(s).