En este tema vamos a ver la forma de introducir una Lupa de forma simple utilizando Javascript para las imágenes de las entradas de tu blog, usando las propiedades layerX y layerY, soportadas por los navegadores estándar, y sus equivalentes.
Ejemplo
Adaptación
Vamos a integrar primero que nada la simple Hoja de estilos, bastaría con añadir el siguiente código antes de la etiqueta
Vamos a añadir el código Javascript, recuerda que antes de integrarlo en tu blog, debes parsear el código para que sea compatible con blogger en nuestro Conversor de código y luego añadirlo antes de la etiqueta
Adicionalmente, debemos frenar el movimiento al llegar a los límites de la imagen pequeña, para no mostrar blancos en la visualización de la ampliación.
¿Problemas con la integración y estructura de imagen?
Ejemplo
recorra con el mouse la primera imagen
Adaptación
Vamos a integrar primero que nada la simple Hoja de estilos, bastaría con añadir el siguiente código antes de la etiqueta
</b:skin> de nuestro blog:
La hoja de estilos está optimizada, a partir de ahora publicaré las hojas de estilos CSS de los tutoriales y artículos optimizadas para mejor rendimiento en Blogger.Vamos a añadir el código Javascript, recuerda que antes de integrarlo en tu blog, debes parsear el código para que sea compatible con blogger en nuestro Conversor de código y luego añadirlo antes de la etiqueta
</head>, el código es el siguiente:
Para concluir, solamente nos faltaría integrar la lupa en nuestra imagen, vamos a utilizar el siguiente código de manera exacta:
El truco consiste en enmascarar la imagen a tamaño completo con una capa con overflow hidden, y desplazarla (seguimos hablando de la imagen), en sentido inverso al movimiento del mouse, la misma distancia en pixeles respecto de su ubicación inicial en las coordenadas 0,0 de la capa, obtenida con layerX y layerY (y sus análogas para IE) durante el evento onmousemove, pero recalculada en función a la diferencia de proporción entre la imagen pequeña y la ampliada. Adicionalmente, debemos frenar el movimiento al llegar a los límites de la imagen pequeña, para no mostrar blancos en la visualización de la ampliación.
¿Problemas con la integración y estructura de imagen?
Primero que nada la estructuración va dependiendo del estilo de su blog, puede haber algún código CSS que interfiera por ejemplo con el parámetro top:0px; de nuestra hoja de estilos, simplemente modificarlo hasta lograr la adaptación.
Si la mini-imagen dónde se generará el zoom no se muestra en el lugar adecuado, puede controlar su ubicación con este parámetro left: 258px; en nuestra hoja de estilos que por defecto es 258px, en mi caso tuve la necesidad de modificar a 310px y el Top de 0px a 480px, dependiendo del estilo de su blog.
