Tamaño elemento jQuery

[MadDunDee]

Hola,

estoy montando un portfolio donde quiero utilizar un efecto concreto para el hover. Quiero que cuando cargue la página todas las imágenes aparezcan en escala de grises, esto lo consigo a través de canvas con este código:

Código PHP:

  // método para sacar escala de grises
    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(); 
   

Bien así convierto las imagenes en su greyscale de modo que solo me queda clonarlas y aplicar el efecto a uno de los clones, usar una función fade para descubrir la imagen a color y ya tengo el efecto que busco. Primero vemos las imágenes en escala de grises y luego durante el hover a color. Este proceso se consigue con el siguiente código:

Código PHP:

  <script type="text/javascript"> 
    
    
    // esperamos a que se carguen todas las imágenes
    $(window).load(function(){
        
 
        $(".thumb img").animate({opacity:1},500);
        
        // clonamos las imagenes
        $('.thumb 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 de la imagen 
        $('.thumb img').mouseover(function(){
            $(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
        })
        $('.img_grayscale').mouseout(function(){
            $(this).stop().animate({opacity:0}, 1000);
        });        
    });
    }
        
</script> 
  

Bien, hasta aquí perfecto. Podéis probarlo como efecto, es muy interesante.

El caso es que en mi caso en la css principal tengo que utilizar sí o sí width:100% para .thumb a img. Por un tema de escalados multidispositivo, especialmente para el iPad.

El problema es que no consigo controlar y no sé cómo pasarle a la función que me crea el contenedor de las imagenes y sus clones el nuevo tamaño de cada img -ya que lo que hace es que al cargar toma un valor desconocido y en hover el 100% del tamaño del viewport para el width y el height-. El tamaño de cada imagen es un tamaño que varía en función del tamaño del viewport, es decir, que no tiene un tamaño fijo. He probado de todo, de modo que dejo el código limpio donde las cosas funcionan en cuanto al escalado de grises y espero que alguien me pueda echar un cable!

Muchas gracias! ;)