Appliquer un effet ShadowBox sur vos images et vidéos

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.

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 :

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.

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&hl&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 !