Usar jQuery para reflejar imágenes en 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:
Incluir esta función en algún sitio web es bastante sencilla y no contiene pasos muy avanzados.
Es crucial tener jQuery instalado en la plantilla, si no lo tienes debéras añadirlo.
En "Diseño | Edición HTML" deberás buscar el siguiente código:
Paso 2: Reflejando una imagen:
Cuando desees reflejar una imagen deberás añadir el siguiente código en la Edición de HTML de la entrada:
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.
Como es posible apreciar en el siguiente ejemplo, la reflexión funciona en todos los navegadores actuales, incluyendo Internet Explorer:
Incluir esta función en algún sitio web es bastante sencilla y no contiene pasos muy avanzados.El tutorial:
Paso 1: Añadiendo el script en la plantilla:
Es crucial tener jQuery instalado en la plantilla, si no lo tienes debéras añadirlo.
En "Diseño | Edición HTML" deberás buscar el siguiente código:
</head>Arriba de este incluye el siguiente:
<script src="http://dl.dropbox.com/u/28164309/AyudaBloggers/jquery/reflection.js" type="text/javascript">Guarda los cambios y listo.
</script>
<script type="text/javascript">
document.ready(function() {
var options = { opacity: 0.69 };
$('.ref-ab').reflect(opciones);
});
</script>
Paso 2: Reflejando una imagen:
Cuando desees reflejar una imagen deberás añadir el siguiente código en la Edición de HTML de la entrada:
<img class="reflect" alt="" width="400px" 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.
Paso 3: Usando CSS en la imagen (Opcional):
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.
