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 | } |