HTML5 Grayscale Image Hover

i would to use it too but no succes, what i did :

- create a js file with the provided code
- include it in the header via

 <script src="<?php print $base_path . path_to_theme() ?>/js/grayscale_hover.js" type="text/javascript" charset="utf-8"></script>

- attriibute a class to image , displayed via views so i rewrite the output like this :

<div class="image_vdl img-gs-hover">[field_illustration_vdl_fid]</div>
<div class="transparency_vdl"></div>
<div class="bloc_image_vdl">
<h2>[title]</h2>
</div>

- add the class to my css :

.img-gs-hover {
	opacity:0;
}

i've an issue with this JS : https://github.com/betamax/getImageData/raw/master/jquery.getimagedata.m...
i 've downloaded it to my jquery_plugin module folder, but seem to be not used...
but online images disappear...and nothing happen on hover...if someone get this working tell us..

thanks

Hi,

it works for me, I've taken this script into a custom.js (I'm under Drupal 7) :

// We define a function that takes one parameter named $.
(function ($) {
	// On window load. This waits until images have loaded which is essential
	$(window).load(function(){
		
		// Fade in images so there isn't a color "pop" document load and then on window load
		$(".item img").fadeIn(500);
		
		// clone image
		$('.item img').each(function(){
			var el = $(this);
			el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
				var el = $(this);
				el.parent().css({"width":this.width,"height":this.height});
				el.dequeue();
			});
			this.src = grayscale(this.src);
		});
		
		// Fade image 
		$('.item img').mouseover(function(){
			$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
		})
		$('.item img.img_grayscale').mouseout(function(){
			$(this).stop().animate({opacity:0}, 1000);
		});		
	});
	
	// Grayscale w canvas method
	function grayscale(src){
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		var imgObj = new Image();
		imgObj.src = src;
		canvas.width = imgObj.width;
		canvas.height = imgObj.height; 
		ctx.drawImage(imgObj, 0, 0); 
		var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for(var y = 0; y < imgPixels.height; y++){
			for(var x = 0; x < imgPixels.width; x++){
				var i = (y * 4) * imgPixels.width + x * 4;
				var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
				imgPixels.data[i] = avg; 
				imgPixels.data[i + 1] = avg; 
				imgPixels.data[i + 2] = avg;
			}
		}
		ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
		return canvas.toDataURL();
    }	    }
(jQuery));

The file is stored in my theme, under js/custom.js ; and is declared in my theme .info file :
scripts[] = js/custom.js

All you have to do then is include your images inside a span or div like

<span class="item">
<img ..... >
</span>

Do not fix any opacity for .item img into your css, or your grayscale images won't be shown.