jQuery para reflejar imágenes en entradas de blogger

Existe un plugin escrito en jQuery llamado Reflection.js el cual permite añadir un efecto de reflexión en las imágenes. Esto es posible mediante CSS pero el problema está en que sólo los navegadores Webkit soportan esta función (Chrome, Safari).

Como es posible apreciar en el siguiente ejemplo, la reflexión funciona en todos los navegadores actuales, incluyendo Internet Explorer:

Ver Ejemplo

Aplicando el Script
Es necesario tener jQuery instalado en la plantilla, si no lo tienes debéras añadirlo.

En la edición de tu plantilla, ahora deberás añadir el siguiente código antes de la etiqueta </head>:

Nota: primero debes pasar el código por nuestro conversor de html para que funcione en blogger

<script type="text/javascript"> /* reflection.js for jQuery v1.03 (c) 2006-2009 Christophe Beyls <http://www.digitalia.be> MIT-style license. */ (function(a){a.fn.extend({reflect:function(b){b=a.extend({height:1/3,opacity:0.5},b);return this.unreflect().each(function(){var c=this;if(/^img$/i.test(c.tagName)){function d(){var g=c.width,f=c.height,l,i,m,h,k;i=Math.floor((b.height>1)?Math.min(f,b.height):f*b.height);if(a.browser.msie){l=a("<img />").attr("src",c.src).css({width:g,height:f,marginBottom:i-f,filter:"flipv progid:DXImageTransform.Microsoft.Alpha(opacity="+(b.opacity*100)+", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy="+(i/f*100)+")"})[0]}else{l=a("<canvas />")[0];if(!l.getContext){return}h=l.getContext("2d");try{a(l).attr({width:g,height:i});h.save();h.translate(0,f-1);h.scale(1,-1);h.drawImage(c,0,0,g,f);h.restore();h.globalCompositeOperation="destination-out";k=h.createLinearGradient(0,0,0,i);k.addColorStop(0,"rgba(255, 255, 255, "+(1-b.opacity)+")");k.addColorStop(1,"rgba(255, 255, 255, 1.0)");h.fillStyle=k;h.rect(0,0,g,i);h.fill()}catch(j){return}}a(l).css({display:"block",border:0});m=a(/^a$/i.test(c.parentNode.tagName)?"<span />":"<div />").insertAfter(c).append([c,l])[0];m.className=c.className;a.data(c,"reflected",m.style.cssText=c.style.cssText);a(m).css({width:g,height:f+i,overflow:"hidden"});c.style.cssText="display: block; border: 0px";c.className="reflected"}if(c.complete){d()}else{a(c).load(d)}}})},unreflect:function(){return this.unbind("load").each(function(){var c=this,b=a.data(this,"reflected"),d;if(b!==undefined){d=c.parentNode;c.className=d.className;c.style.cssText=b;a.removeData(c,"reflected");d.parentNode.replaceChild(c,d)}})}})})(jQuery); // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED) jQuery(function($) { $("img.reflect").reflect({/* Put custom options here */}); }); </script> Guarda los cambios y ya.

Ahora vamos a reflejar la imagen utilizando el siguiente código en la Edición de HTML de la entrada: <img class="reflect" alt="" width="auto" height="auto" src="URL-IMAGEN"/> Modifica los valores width y height por el ancho y alto correspondientes y reemplaza URL-IMAGEN por la dirección de la imagen.

Es posible editar los atributos de estilo de la imagen mediante la class .reflect, pero valores como width y height no deberán ser incluídos en la zona CSS por incompatibilidades con el script, tanto la altura como el ancho de la imagen deberá ser establecido en el código del paso 2.