SHOW:
|
|
- or go back to the newest paste.
1 | jQuery(document).ready(function($){ | |
2 | // Fade in images so there isn't a color "pop" document load and then on window load | |
3 | $(".grayscale").fadeIn(500); | |
4 | // clone image | |
5 | $('.grayscale').each(function(i){ | |
6 | var el = $(this); | |
7 | 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(){ | |
8 | var el = $(this); | |
9 | el.parent().css({"width":this.width,"height":this.height}); | |
10 | el.dequeue(); | |
11 | }); | |
12 | grayscale(this.src, i); | |
13 | }); | |
14 | // Fade image | |
15 | - | $('.grayscale').mouseover(function(){ |
15 | + | $('.grayscale').mouseout(function(){ |
16 | $(this).parent().find('img:first').stop().animate({opacity:1}, 1000); | |
17 | }) | |
18 | - | $('.img_grayscale').mouseout(function(){ |
18 | + | $('.img_grayscale').mouseover(function(){ |
19 | - | $(this).stop().animate({opacity:0}, 1000); |
19 | + | $(this).parent().find('img:first').stop().animate({opacity:0}, 1000); |
20 | - | }); |
20 | + | }); |
21 | }); | |
22 | ||
23 | // Grayscale w canvas method | |
24 | function grayscale(src, index){ | |
25 | var canvas = document.createElement('canvas'); | |
26 | var ctx = canvas.getContext('2d'); | |
27 | var imgObj = new Image(); | |
28 | imgObj.src = src; | |
29 | imgObj.onload = function(){ | |
30 | canvas.width = imgObj.width; | |
31 | canvas.height = imgObj.height; | |
32 | ctx.drawImage(imgObj, 0, 0, imgObj.width, imgObj.height, 0, 0, canvas.width, canvas.height); | |
33 | var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); | |
34 | for(var y = 0; y < imgPixels.height; y++){ | |
35 | for(var x = 0; x < imgPixels.width; x++){ | |
36 | var i = (y * 4) * imgPixels.width + x * 4; | |
37 | var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; | |
38 | imgPixels.data[i] = avg; | |
39 | imgPixels.data[i + 1] = avg; | |
40 | imgPixels.data[i + 2] = avg; | |
41 | } | |
42 | } | |
43 | ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); | |
44 | - | jQuery('.img_grayscale').eq(index).attr('src', canvas.toDataURL()); |
44 | + | jQuery('.img_grayscale').eq(index).attr('src', canvas.toDataURL()).css('opacity',1); |
45 | } | |
46 | } |