Grow your CSS skills. Land your dream job.

Grayscale website with jQuery

  • # April 12, 2010 at 9:15 am

    I need to temporarily make an entire website grayscale, so exporting every single image from header, footer, nav bars, ads, etc., changing the CSS and all that would take forever.

    Is there a jQuery function, script, plugin or something that can make an entire website in grayscale? All I could find was stuff for making an image in grayscale on hover.

    If there’s no plugin or function or something, a jQuery plugin guru should build one… not sure if anyone else has come up with the same idea.

    Thanks in advance.

    # April 12, 2010 at 10:38 am

    What was the jQuery code you found?

    # April 12, 2010 at 10:44 am

    http://old.nabble.com/Change-image-to-b … 27240.html
    http://www.sohtanaka.com/web-design/gre … ss-jquery/
    http://www.ajaxblender.com/howto-conver … cript.html

    I need to change the entire site ASAP, changing just the images is not enough, I need to change background colors, fonts, links… CSS stuff, and that’s a looong process.

    Thanks,

    # April 12, 2010 at 12:44 pm

    Here it is: http://james.padolsey.com/demos/grayscale/

    # April 12, 2010 at 3:33 pm

    That’s a pretty cool script, but they don’t inform you of how you implement it at all (Not that I can see).

    It looks like this is the jQuery that is causing the image changes:

    Code:
    $(‘a.button’,’#contain’).toggle(function(){
    grayscale(this.parentNode);
    }, function(){
    grayscale.reset(this.parentNode)

    So try loading both of the files and use this jquery code:

    Code:
    $(document).ready(function(){
    $(‘img’).grayscale(this.parentNode);
    });

    I don’t think my solution will work though, but it’s worth a shot.

    I would do all of that manually though. It shouldn’t be too difficult to change all of the CSS colours if there aren’t too many. Let’s say they have 10 different colours; You can search/replace the values for different values. I don’t think that should take too long. And also, I’m not sure how many images there are, but what you could do is drag them all into photoshop and create an action that desaturates and then closes and saves the image. So all you do is click "play action" over and over again. The action would be completed practically immediately and you would just be clicking away completing more than 1 a second. After that you just upload the images again. (There is an EVEN quicker way of doing this in photoshop but I’ve forgotten how)

    p.s. That sohtanaka.com example you showed doesn’t actually make the image gray. It just fades a colour image into a gray image, so there are 2 images.

    # April 16, 2010 at 5:58 pm

    what about this service: http://graybit.com/main.php

    it does it for you.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".