Alternweb

3
GD Star Rating
loading...

Ajouter une lightbox sur vos photos WordPress

Johnny Lundi 22 avril 2013

Une lightbox, c’est quoi ?

Vous en avez déjà vu, c’est certain, mais vous ne saviez pas que c’était ça.

Pour faire simple, c’est un système de zoom sur image présente sur le site lors du clic; l’image semble se décoller de la page et s’agrandir (normalement).

Un exemple sera certainement plus parlant :

Exemple d'un zoom image sur WordPress

Exemple d’un zoom image sur WordPress

Comment je rajoute un plugin de lightbox ?

Maintenant que vous savez ce qu’est une lightbox, comment faire pour en rajouter une à votre site wordpress ?

Rendre les images des articles compatibles avec une « lightbox »

Ajoutez l’extension add-rel-lightbox

close

Il faut dans un premier temps indiquer que vos images s’ouvriront dans une lightbox, le plugin « add-rel-lightbox » est celui qu’il vous faut. Il permet d’ajouter l’attribut « rel= »lightbox[this_page] » qui déclenchera l’ouverture du zoom (on peut le voir à la ligne 1 ci-dessous).

<a href="http://i1.wp.com/www.alternweb.fr/wp-content/uploads/2013/04/lightbox-wordpress.png" rel="lightbox[post-801]">
<img alt="Exemple d'un zoom image sur WordPress" src="http://i1.wp.com/www.alternweb.fr/wp-content/uploads/2013/04/lightbox-wordpress.png?w=800" width="800" height="248" />
</a>

Une fois ce plugin installé, passons à l’étape suivante.

Choisir son plugin de lightbox pour WordPress

Ajoutez l’extension prettyPhoto Media

close

Il en existe un grand nombre et votre choix sera difficile à faire, attention de bien contrôler que le plugin permet de choisir l’attribut « rel » à utiliser.

J’utilise et je vous conseille donc d’utiliser le plugin « prettyPhoto Media » et de le configurer comme suit :

Paramètres du plugin de lightbox prettyPhoto Media

Paramètres du plugin de lightbox prettyPhoto Media

Maintenant, vous avez un ensemble de plugin fonctionnel pour utiliser les lightbox. Cependant il reste une dernière étape (rapide) qui consiste à lier l’image que vous allez ajouter dans votre article au système de lightbox.

Lier une image à la lightbox

C’est très simple, lors de l’ajout d’une image, vous avez le choix dans cible du lien entre :

  1. Aucun : Supprime le lien
  2. Lien actuel : Donne comme lien le lien de l’article (en fonction des thèmes)
  3. Lier à l’image : Donne comme lien l’URL de l’image

Pour que ça fonctionne, obligatoirement utiliser le bouton « Lier à l’image »

Lier à l'image

Utilisez le bouton « Lier à l’image »

Résultat attendu

Même si vous avez pu voir le fonctionnent du plugin et d’une lightbox au cours de cet article, je mets une dernière image en lightbox :

Energie - http://izart.fr/creations/encres/energie/

Energie – Crédit : http://izart.fr/creations/encres/energie/

Plugins utilisés pour ce tuto :

  1. http://wordpress.org/extend/plugins/prettyphoto-media/
  2. http://wordpress.org/extend/plugins/add-rel-lightbox/

Ajouter une lightbox sur vos photos WordPress, 5.7 out of 10 based on 3 ratings

About Author

Johnny

Actuellement en alternance, J'étudie dans le domaine du Marketing. Mes précédentes expériences en tant que "chargé de référencement & d'intégration web" et "développeur web" sous la plateforme e-Commerce Magento me permettent de mettre en place moi-même les solutions de web-marketing. Depuis Aout 2013, je travaille au développement du site Floraquatic en tant que Social Contact Manager. Voir tous les articles par Johnny →

Comments (3)

  1. Pingback: Blog référencement - Ajouter une lightbox sur vos photos WordPress - Alternweb - Blog référencement

  2. Merci pour cette astuce!
    D’autant plus que l’ajout d’une image sur son site est actuellement conseillé pour rendre son site plus attrayant, rendre l’image compatible à une lightbox la rendra beaucoup plus sympa.

    GD Star Rating
    loading...
    Répondre

Laisser un commentaire

Connectez-vous à votre compte

Vous avez oublié votre Mot de passe ?

Inscrivez-vous à ce site!

Image CAPTCHA