JQuery / HTML / CSS Grayscale to color image slider

Question

Im hoping somebody on here can help me. I am currently building a website for a client and on the index page will be an image slider/fader that will display a sequence of images. What the client has asked for is for on the transition from one image to another for the next image in the sequence to fade in as grayscale and slowly turn to color and the pause for a few seconds before loading in the next image.

I have been using an image fader that works fine for the transition but would like to modify it for the grayscale feature. Being new to jQuery and there doesn't appear to be any 'ready built' on the internet so i'm struggling a bit.

My CSS is a follows:

.index_slideshow { position:relative; height:340px; width:980px; margin:auto; }
.index_slideshow IMG { position:absolute; top:0; left:0; z-index:8; }
.index_slideshow IMG.active { z-index:10; }
.index_slideshow IMG.last-active { z-index:9; } 

My jQuery is as follows:

function slideSwitch() {
var $active = $('.index_slideshow IMG.active');

if ( $active.length == 0 ) $active = $('.index_slideshow IMG:last');
var $next =  $active.next().length ? $active.next()
    : $('.index_slideshow IMG:first');
$active.addClass('last-active');

$next.css({opacity: 0.0 })
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});

And my HTML is:

<div class="index_slideshow" id="index_slideshow">
<img src="images/img2.jpg" alt="" />
<img src="images/img.jpg" alt="" />
</div>

Hope some one can help me! :-)

Answer 1

A simple way to do it would be to insert greyscale versions of the images into the slideshow:

<div class="index_slideshow" id="index_slideshow">
<img src="images/img2.jpg" alt="" />
<img src="images/img2grey.jpg" alt="" />
<img src="images/img1.jpg" alt="" />
<img src="images/img1grey.jpg" alt="" />
</div>

(I assume from your img order that the images that appear lower in the code display first... but just swap the position of imgX.jpg and imgXgrey.jpg if that's an incorrect assumption.)

Apart from that, you're looking at a combination of the Canvas element and IE filters: http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html (Ignore the tags that say the code is PHP. It's Javascript. The tags are probably leftover cruft from an old CMS.)

You'd have to extend that to animate each step of the way between grayscale and color, so as long as you're not dealing with massive images, the first method is the easiest.