Globedia.com

×
×

Error de autenticación

Ha habido un problema a la hora de conectarse a la red social. Por favor intentalo de nuevo

Si el problema persiste, nos lo puedes decir AQUÍ

×
cross

Suscribete para recibir las noticias más relevantes

×
Recibir alertas

¿Quieres recibir una notificación por email cada vez que Recursos Blog escriba una noticia?

Reflejar imágenes

04/04/2012 07:00 0 Comentarios Lectura: ( palabras)

imageEn este blog ya hemos hablado de la importancia que tienenla inclusión de imágenes en el contenidote nuestros post. También hemos habladode 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 lablogosfera.

Hoyqueremos centrarnos en un script de Jquery que nos permite aplicar un efecto dereflejo a cualquier imagén de nuestro blog. Este efecto es muy sencillo deincluir en nuestro blog y le confiere un aspecto distinguido, elegante ydiferenciador a las imágenes de nuestro blog.

Lo primeroque 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 pegamosel siguiente código antes de la etiqueta

<scripttype="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);returnthis.unreflect().each(function(){varc=this;if(/^img$/i.test(c.tagName)){function d(){varg=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:"flipvprogid: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(){returnthis.unbind("load").each(function(){varc=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 BECHANGED OR REMOVED) jQuery(function($) { $("img.reflect").reflect({/*Put custom options here */}); }); </script>

image Una veztengamos guardada nuestra plantilla con el script anterior, ya podemos utilizardicho script que las fotos del blog, para ello debemos modificar el código htmldel post donde tengamos la imagen, concretamente modificaremos lossiguientes parámetros de la etiqueta : class="reflect" width="auto" heigth="auto"

Quedandola etiqueta de la siguiente forma:

class = "reflect" width= "auto" height= "auto" ..../>

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


Sobre esta noticia

Autor:
Recursos Blog (173 noticias)
Fuente:
recursos-blog.blogspot.com
Visitas:
1682
Licencia:
¿Problemas con esta noticia?
×
Denunciar esta noticia por

Denunciar

Comentarios

Aún no hay comentarios en esta noticia.