Últimas Entradas
Inicio » Tráfico Web » Reflejar imágenes

Reflejar imágenes

En este blog ya hemos hablado de la importancia que tienen la inclusión de imágenes en el contenidote nuestros post. También hemos hablado de cómo incluir algunos script para añadir efectos a dichas fotografías y así darles un toque original y diferenciador respecto al resto de blogs de la blogosfera.

            Hoy queremos centrarnos en un script de Jquery que nos permite aplicar un efecto de reflejo a cualquier imagén de nuestro blog. Este efecto es muy sencillo de incluir en nuestro blog y le confiere un aspecto distinguido, elegante y diferenciador a las imágenes de nuestro blog.
            Lo primero que debemos hacer es incluir en el siguiente script en la plantilla de nuestro blog, lo que debemos acceder al editor de html de nuestra plantilla y pegamos el siguiente código antes de la etiqueta
<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>

            Una vez tengamos guardada nuestra plantilla con el script anterior, ya podemos utilizar dicho script que las fotos del blog, para ello debemos modificar el código html del post donde tengamos la imagen, concretamente modificaremos los siguientes  parámetros de la etiqueta:
           
            class=”reflect”
            width=”auto”
            heigth=”auto”
Quedando la  etiqueta de la siguiente forma:
            class=“reflect” width=“auto” height=“auto” …./> 

De esta forma tan sencilla podremos darle un efecto distinto a algunas imágenes del blog.
             

Deja un Comentario

Tu dirección de email no será publicada. Required fields are marked *

*

Utilizamos cookies propias y de terceros para mostrarle publicidad relacionada con sus preferencias según su navegación. Si continúa navegando consideramos que acepta el uso de cookies. Más información >