jqZoom
Te gustaría mostrar una imagen con mucho más detalle pero no tienes lugar? Con este plugin conseguirás un efecto de lupa o zoom y así podrás ampliar la parte de la imagen que quieras ver con más detalle.
Pudes descargártelo, ver más ejemplos y documentarte más en su página oficial.
En este artículo vamos a ver lo que se necesita para disponer de un ejemplo básico del script en nuestra página Web.
Lo primero que tendremos que hacer es disponer de los archivos necesarios en nuestro servidor y añadirlos a la cabecera o <head> de nuestra página:
<script src="../js/jquery-1.6.js" type="text/javascript"></script>
<script src="../js/jquery.jqzoom-core.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:true
});
});
</script>
Necesitaremos la librería jQuery, el plugin jQzoom y la llamada al script con los parámetros necesarios.
Seguidamente en nuestro <body> tendremos algo como lo siguiente:
<a href="imgProd/triumph_big1.jpg" rel='gal1' title="triumph" > <img src="imgProd/triumph_small1.jpg"> </a>
Que no es más que un link que dentro tiene una imagen pequeña y que al pasar por encima se aplica el zoom obteniendo la imagen grande.
También conseguimos el efecto añadiendo un ancho y alto más pequeño del original a la imagen redimensionándola.
Ver demostración con efecto drag
Ver demostración resize position
Autor
¿Buscas trabajo de programador?
3 respuestas a “jqZoom”
Deja una respuesta
58 artículos que te podrían interesar
Estou a iniciar as configurações da minha loja, no entanto preciso que ao passar o o rato nas cores/texturas estas aumentem, mas não sei como fazer zoom dos atributos de cores/texturas ao passar o rato por cima. Poderia me dar uma ajuda passo a passo, pois não entendo muito disto? Obrigado
If you provide the URL of the shop we could help.
Jose , que buen articulo! gracias!
saludos