Appliquer un effet ShadowBox sur vos images et vidéos

Afficher les images dans la même fenêtre avec un effet d’ombre dit « lightbox » n’a rien de compliqué. Bénéficier d’un tel effet à la fois pour les images et les vidéos, c’est déjà une autre paire de manches ! Je vous propose donc de mettre en place un effet « shadowbox » pour vos différents contenus multimédias avec un plugin gratuit et léger, le tout en JavaScript.

Aperçu du résultat

Voici l’effet obtenu à l’aide du script ShadowBox.

Capture d'écran - Protuts.net utilise ShadowBox
Sur Protuts TV, l’effet ShadowBox est activé sur les vidéos

Utilisation de ShadowBox

Pour information, nous utiliserons le plugin ShadowBox JS qui permet d’utiliser le JavaScript ShadowBox sous WordPress. Pour une utilisation commerciale, vous devrez acquérir la licence qui s’élève à environ 20 $.

De même si vous comptez utiliser le lecteur FLV (Flash), le plugin requiert JW FLV Player qui est lui aussi payant pour une utilisation commerciale – ce qui n’est pas vraiment un problème si vous hébergez vos vidéos sur YouTube.

Installation

Téléchargez donc ce dernier puis installez-le comme n’importe quelle extension WordPress :

ShadowBox JS

Obtenez un effet ShadowBox sur vos contenus multimédias (images, vidéos, Flash,etc.).

Taille : 548,8 KiB  •  Date : 26 avril 2010 •  Hits : 1 277

ShadowBox JS, traduction française

Fichiers de traductions du plugin ShadowBox JS.

Taille : 14,8 KiB  •  Date : 26 avril 2010 •  Hits : 1 363

Configuration de base

Ceci fait, il nous faut configurer les différentes options disponibles en déroulant le menu Réglages puis en cliquant sur ShadowBox JS.

Par défaut, le plugin va automatiser le travail. Autrement dit, à partir du moment où vous avez installé l’extension, il ne vous reste plus rien à faire. Les liens qui pointeront vers des vidéos YouTube, des images ou autres seront affichés selon l’effet ShadowBox.

Néanmoins, une telle solution de facilité n’est guère appréciable car il y a fort à parier que vous ne souhaitez pas automatiser ce processus ; mais réserver cet effet à certains contenus spécifiques. Par exemple, une image cliquable sur votre page d’accueil qui ouvre une vidéo commerciale de votre produit.

Capture d'écran - Options de ShadowBox JS pour WordPress
Les nombreux paramètres raviront les amateurs de personnalisation

Je vous conseille donc de basculer sur False les intitulés de la section ShadowBox Automation.

Les utilisateurs avancés et autres amateurs de personnalisation seront comblés en cliquant sur Show Advanced Configuration. Parmi les options intéressantes, on retiendra :

  • Le réglage du degré d’opacité et de sa couleur ;
  • La lecture automatique des vidéos ;
  • L’activation des animations ;
  • L’ajout de paramètres Flash personnalisés ;

Pour valider le tout, n’oubliez pas de cliquer sur Sauvegarder les changements.

Exemple d’utilisation avec une vidéo YouTube

Partant du principe que vous n’avez pas activé l’automatisation de ShadowBox, voyons à présent comment en bénéficier au cas par cas.

Il faut savoir qu’un tel effet – de même que pour LightBox, s’applique sur des liens (liens texte, liens images, etc.). Il suffit de faire pointer du texte vers une image, ou même créer une image qui pointe vers une vidéo.

Ouvrez un article puis passez l’éditeur en mode HTML. Repérez une balise  <a> puis ajoutez rel="shadowbox" pour appliquer l’effet. Notez que le plugin supporte également rel="lightbox" si par cas vous aviez déjà utilisé un plugin LightBox.

Pour qu’une vidéo YouTube soit correctement lue, vous devez copier le lien sous cette forme http://www.youtube.com/v/ID_video

Concernant la lecture automatique des vidéos, notez qu’il est nécessaire de rajouter le code suivant en bout d’URL pour les vidéos YouTube : &autoplay=1;

Bien évidemment des paramètres de personnalisation existent. Vous pouvez notamment redimensionner le lecteur en ajoutant les paramètres de hauteur et de largeur. Au final, vous obtiendrez un bout de code sous cette forme :

<a title="NOM VIDEO" rel="shadowbox;width=LARGEUR;height=HAUTEUR" href="http://www.youtube.com/v/ID_video&amp;hl&amp;autoplay=1;">
<img title="TITRE DE L'IMAGE" src="URL SOURCE IMAGE" alt="TEXTE ACCESSIBILITE" width="210" height="227" />
</a>

ShadowBox JS est sans doute le meilleur plugin d’effet visuel pour WordPress qui remplit les conditions suivantes : prises en charges de divers contenus multimédias, légèreté et simplicité d’utilisation, personnalisation poussée, etc. Bref, des effets sans pertes de performances – testé en situation réelle !

Crédits photo : mondays child

5 commentaires

  1. bernard

    Bonsoir Aurélien, je souhaiterai utiliser un tel effet sur mes miniatures d’articles sur ma page d’accueil..
    J’utilise le thème swatch de chez woo themes et le script utilisé pour générer les miniatures est WP Post Thumbnail..
    Ainsi depuis cette miniature je voudrai pouvoir ouvrir une vidéo avec un effet shadowbox..
    Je ne crois pas cela possible mais votre avis technique, si toutefois vous pouvez me consacrer quelques minutes, me serait précieux..
    Sinon ce n’est pas bien grave et quoi qu’il en soit, je vous remercie pour tes tutos bien utiles et vous adresse mes meilleurs voeux de bonne année

Laisser un commentaire