47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
$(window).load(function() {
|
|
$('.imglist img').each(function() {
|
|
$(this).wrap('<div style="display:inline-block;width:' + this.width + 'px;height:' + this.height + 'px;">').clone().addClass('gotcolors').css({'position': 'absolute', 'opacity' : 0 }).insertBefore(this);
|
|
this.src = grayscale(this.src);
|
|
}).animate({opacity: 1}, 500);
|
|
});
|
|
|
|
$(document).ready(function() {
|
|
$(".imglist a").hover(
|
|
function() {
|
|
$(this).find('.gotcolors').stop().animate({opacity: 1}, 200);
|
|
},
|
|
function() {
|
|
$(this).find('.gotcolors').stop().animate({opacity: 0}, 500);
|
|
}
|
|
);
|
|
});
|
|
|
|
|
|
function grayscale(src) {
|
|
var supportsCanvas = !!document.createElement('canvas').getContext;
|
|
if (supportsCanvas) {
|
|
var canvas = document.createElement('canvas'),
|
|
context = canvas.getContext('2d'),
|
|
imageData, px, length, i = 0, gray,
|
|
img = new Image();
|
|
|
|
img.src = src;
|
|
canvas.width = img.width;
|
|
canvas.height = img.height;
|
|
context.drawImage(img, 0, 0);
|
|
|
|
imageData = context.getImageData(0, 0, canvas.width, canvas.height);
|
|
px = imageData.data;
|
|
length = px.length;
|
|
|
|
for (; i < length; i += 4) {
|
|
gray = px[i] * .3 + px[i + 1] * .59 + px[i + 2] * .11;
|
|
px[i] = px[i + 1] = px[i + 2] = gray;
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
return canvas.toDataURL();
|
|
} else {
|
|
return src;
|
|
}
|
|
} |