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

  • SuperNoob

    Et vive le css ex :filter:grayscale(0.5)… marche même sur IE6, pourquoi faire simple quand on peut faire compliqué avec du js :/

    • Miamosoe

      parce que Firefox ne le gère pas :-( et l’effet est beaucoup plus « maitrisable » en js ..

  • Thomas Toronja-Poussin

    Bon je sais que ça date mais alors j’aurais deux trois remarques:

    -premièrement la façon d’intégrer le plug-in est différente sur ce site, sur le site de l’auteur du plug-in, et dans le readme que met l’auteur du plug-in à notre disposition.

    -deuxièmement, aucune ne marche. Ça va faire deux heures que je me débat avec ce truc, je sens que je craque.

    Un peu d’aide serait bienvenue :(