Pixastic Desaturate images with jQuery on mouseover, mouseenter, mouseleave

Had another great morning wangling my way around 4 browsers (7 if include each version of IE). The client had a requirement an image would have a black and white version and this would flip when the user moused in, over, out, etc.

Problem was we couldn’t rely on the client loading a black and white image, or know how to create one…these are clients after all! And having them contact us each time to create the black and white version each time is not going to happen (unless they paid…).

Enter Pixastic.

This is one of the coolest widgets I have the pleasure to work with. It plays with your images soooo nicely and seems to be completely cross browser compatible. Nice work boys! However…

The Problem

When you apply Pixastic’s desaturate code to the image the image disappears out the DOM and a Canvas element replaces it. So if you have done the standard $(image id or class).hover() with jQuery (or mootools or whatever) then when you mouse over it works, but is instantly remove from the DOM so you straight away get a mouse out event being fired. Damn! Not what you want! Worse still the image now reappears causing a mouse over event which, yes you guessed, it flips it back. You get a nice wee flicker happening – not good if you don’t like flash photography!!

The Solution

I won’t go into the depths of what I did. I will just add the code so you get back to your day job and make tonnes of money.

$(window).load(function () {
    $("div.parent").each(function (index, obj) {
        $("#" + $(obj).attr("data-image")).pixastic("desaturate"); // make it black n white
    });

    $("div.parent").mouseenter(function (e) {
        var self = document.getElementById($(e.currentTarget).attr("data-image"));
        Pixastic.revert(self); // make it colour
    });

    $("div.parent").mouseleave(function (e) {
        // make it black n white again (yes I should refactor this...)
        $("#" + $(e.currentTarget).attr("data-image")).pixastic("desaturate");
    });
});

However what you will notice is instead of the code being in the $(document).ready() function call, it’s in the $(window).load(). Images are not fully loaded at $(document).ready() in Webkit (Chrome and Safari). As Pixastic checks to see if the image is loaded with “this.complete” before processing it (otherwise it could try to process something that isn’t there…) then your code needs to be in this function call.

But once you do that, it works a treat! Check out my demo to prove that it works!

7 thoughts on “Pixastic Desaturate images with jQuery on mouseover, mouseenter, mouseleave”

  1. thanks, nice script 🙂
    but i cannot figure it out how to add fadeIn/fadeOut effect on hover.
    can someone help me please?

  2. Unfortunately not. I think this might not be possible thinking about it. The desaturate method is either on or off. I don’t see a blend function.

    However another solution might come to hand a bit easier – but it doesn’t use this code. Solution: 2 images. 1 on top of the other. The top one black and white, bottom colour. Use jQuery to fade the black and white one’s opacity.

    If you don’t have an easy way to make a black and white image (hence why you are probably looking at this script) then use pixastic to make your black and white image and do the fade on the canvas? Not sure if you can fade a cancas in and out. But that should give you another avenue to think about 😀

    Colin

  3. thanks for the reply 🙂

    i have resolved it finally, with pixastic, jquery and a custom function that i wrote. i was thinking about generating the bw image server sided, with GD library, but i was thinking about bandwidth, so i wanted to resolve it client sided.
    i did it like this:
    in my function i duplicated the image, converted the duplicate with pixastic, and placed under the original image. then, on my original image i made a hover effect in jquery to animate the opacity 🙂 works flawlessly. i had some browser incompatibilities but they are resolved now.

    thanks!

  4. Brilliant! Glad I could help 🙂 pS I wouldnt worry about bandwidth too much these days. A few black n white images that are created well will not cause major problems, but glad you found a happy solution.

  5. Simoleone, would you mind pointing us to the code where you faded between effects? I’d love to learn more about how you did that! Or ping me at tom at kreation dot com. Thanks!

  6. This is a bad solution. It work only if desaturate by default and cancel effect if hover. If i want desaturate on hover – on mouse leave color does not restore.

Leave a Reply

Your email address will not be published.