Here is a responsive slideshow with a gray-scale transition:
http://sandbox.resourcefurniture.com/slideshowtest.html
The markup is very light:
<div id='slideshow'>
<img src="http://sandbox.resourcefurniture.com/rf-content/themes/resourceFurniture/images/home-page-slides/slide1.jpg">
<img src="http://sandbox.resourcefurniture.com/rf-content/themes/resourceFurniture/images/home-page-slides/slide2.jpg">
<img src="http://sandbox.resourcefurniture.com/rf-content/themes/resourceFurniture/images/home-page-slides/slide3.jpg">
</div>
CSS:
body {
margin:0;
padding:0;
}
#slideshow {
width:100%
}
#slideshow img {
width:100%;
}
#slideshow .holder {
width:100%;
overflow:hidden;
position:absolute;
top:0;
left:0;
z-index:0;
display:none;
}
#slideshow .active {
display:block;
z-index:999;
}
#slideshow .gactive {
display:block;
z-index:998;
}
#slideshow .next {
display:block;
z-index:997;
}
#slideshow img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\\'http://www.w3.org/2000/svg\\'><filter id=\\'grayscale\\'><feColorMatrix type=\\'matrix\\' values=\\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
Is it possible to refine the JavaScript to make the transition smoother in FireFox and IE?
$(document).ready(function(){
//remove javascript disabled mode
$('body').removeClass('nojs');
//set up slideshow
$('#slideshow img').each(function(){
var src=$(this).attr('src');
var replacements="<div class='holder'><img src='"+src+"' /></div><div class='holder'><img src='"+src+"' class='grayscale' /></div>";
$(this).replaceWith(replacements);
});
//set image widths
var total_width=$('#slideshow').width();
$('#slideshow img').width(total_width);
$(window).resize(function(){
total_width=$('#slideshow').width();
$('#slideshow img').width(total_width);
});
//set first slide as active
$('#slideshow .holder:first').addClass('active');
setInterval(function(){animateSlides()},5000);
function animateSlides(){
var gactive= $('#slideshow .active').next().addClass('gactive');
var next= $(gactive).next().addClass('next');
if( next.length == 0 ) {
next=$('#slideshow .holder:first').addClass('next');
}
$('#slideshow .active').animate(
{ "width": "-="+total_width+"px" }, 3000,'linear',
function() {
$(this).removeClass('active').removeAttr('style');
}
);
$(gactive).delay(1000).animate(
{ "width": "-="+total_width+"px" }, 3000,'linear',
function(){
$(this).removeClass('gactive').removeAttr('style');
$(next).addClass('active').removeClass('next');
}
);
}
});
</script>
Thank you
E