BlackAndWhite, passez vos images en noir et blanc avec jQuery

30 janvier 2013

BlackAndWhite est un plugin jQuery qui permet de générer une image en noir-et-blanc à partir d’une image en couleur, avec la possibilité de mettre en place une animation au rollover faisant apparaitre soit l’une, soit l’autre.

Passez au noir et blanc !

Le plugin peut facilement convertir n’importe quelle image couleur en une image noir et blanc avec niveaux de gris. Pour cela, il utilise l’élément HTML5 canvas et propose une solution de repli pour les anciens navigateurs. Ainsi, on peut afficher une liste d’images dé-saturées qui s’animent pour reprendre leurs couleurs initiales au rollover, et inversement. Vous pouvez bien sûr vous en servir uniquement pour afficher des images décolorées statiques, sans le moindre effet.

jquery_blackwhite

Quelques options sont disponibles pour configurer BlackAndWhite : changement d’image au rollover ou non, vitesse d’animation en entrée et en sortie du rollover (transition de type fade uniquement), affichage des images noir-et-blanc pour animer vers la couleur ou inversement, activation d’un mode responsive (sur les images et les canvas), etc.

Installation du plugin

On commence par inclure jQuery et le plugin BackAndWhite :

<script src="js/jquery.js"></script>
<script src="js/jQuery.BlackAndWhite.js"></script>

Ensuite, on définit la structure HTML qui va afficher les images, par exemple une liste non ordonnée. Il faut ensuite penser à ajouter une classe CSS sur l’élément qui englobe l’image. Ici, l’élément parent est un lien et on lui applique la classe bwWrapper.

<ul class="wrapper">
   <li>
      <a href="#" class="bwWrapper">
         <img src="files/image1.jpg" alt="" />
      </a>
   </li>
   <li>
      <a href="#" class="bwWrapper">
         <img src="files/image2.jpg" alt="" />
      </a>
   </li>
   <li>
      <a href="#" class="bwWrapper">
         <img src="files/image3.jpg" alt="" />
      </a>
   </li>
</ul>

Puis on ajoute les propriétés CSS suivantes sur l’élément parent :

.bwWrapper {
    position:relative;
    display:block;
}

Enfin, on termine par l’appel du plugin. Attention, il faut bien penser à utiliser la méthode $(window).load() qui permet d’attendre le chargement complet des images avant l’exécution du script, et non $(document).ready().

$(window).load(function(){
    $('.bwWrapper').BlackAndWhite({
        hoverEffect : true,
        responsive:true,
        speed: {
            fadeIn: 200,
            fadeOut: 800
        }
    });
});

BackAndWhite est donc un plugin jQuery pratique pour passer facilement vos images couleur en noir-et-blanc côté client.

Requis : jQuery
Compatibilité : Tous navigateurs
Démonstration : http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/
Licence : MIT

Commentaires