Hey all… I’ve got a website I’m developing here:
http://clients.paradigmdesignco.com/tgm/ (forgive some obvious snafus…it’s still in development)
I’ve got a grayscale image transition that is working correctly based on the script…when you roll over a post’s image, it changes the image from grayscale to color. Everything is good on the script. It is functioning great, I just want to expand it.
What I want to do is animate the image when you rollover the post’s div. And fade it back out when you roll off the div. I’m in wordpress, so all the posts have the same class of “.post” and all images have a class of “.wp-post-image”. Keep in mind content is being delivered dynamically through Wordpress, so I can’t apply individual classes to each image.
Here is the existing javascript:
// 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
$(".post img").fadeIn(500);
// clone image
$('.post 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
$('.post img').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 500);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 500);
});
});
// 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();
}
Changing “.post img” under the fade options to “.post” works for making the entire post active, but it also makes every other post active for changing that first image. No other images change at that point. Further, the image only changes back when I rollout of the image itself. Now I can change the fadeout to “$(this).parent().find(‘img:first’).stop().animate({opacity:0}, 500);” as well…but that still only affects the first image, and is activated rolling over any post.
Hopefully I’m making myself clear as to what I want to achieve. Any help would be greatly appreciated.
Thanks!