Easy Zoom es un plugin de jQuery, que permite de forma muy fácil crear un zoom en tus fotografías. Este plugin trabaja con dos tamaños de fotografía, con lo que tendrás que crear la fotografía en miniatura y también la fotografía grande. Al pasar por encima el ratón de la fotografía en miniatura te crea una capa flotante donde te va mostrando los detalles de la foto más ampliada, de forma que verás más grande los lugares donde tengas posicionado el ratón.
Es muy fácil de configurar, sólo tienes que incluir el CSS para definir tu espacio de visualización. Poniendo una precarga de la foto casi ya te diría que tienes el plugin de Zoom ya configurado para su uso.
Vamos a ver cómo configurarlo
Paso 1. Debes de preparar las fotos, crearás una en miniatura y otra en grande.
Paso 2. Vas a mostrar la foto en miniatura siempre enlazada a la foto correspondiente en grande, lo único que debes de hacer es darle una class=»zoom». ¿Fácil verdad?.
Paso 3. Personalizar el CSS para adecuar la forma en la que se muestre la foto ampliada.
Paso 4. Por supuesto, no puedes olvidarte de agregar a tu código el jQuery y el javascript del plugin.
Listo, ya tendrás configurado y para el uso el Easy Zoom. Te dejo debajo todo…
Trabajando con el plugin Easy Zoom
Partes importantes de nuestro código HTML
<link type="text/css" rel="stylesheet" href="default.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="easyzoom.js"></script> <script type="text/javascript"> jQuery(function($){ $('a.zoom').each(function(){ $(this).easyZoom(); }); // lo aplica a todas las imagenes que tengan a.zoom }); </script>
Pondremos el link a nuestra CSS. Añadiremos los javascript de jQuery el propio del Plugin.
Y añadiremos la definición de cómo queremos que identifique el hacer zoom, en nuestro caso hemos creado un link «anchor» con una clase de css «zoom», y le decimos posteriormente todos los enlaces que tengan asociado la clase zoom se tienen que comportar como easyZoom();
De esta forma estamos tomando todas las imágenes, pero si aplicamos a una directamente sería más fácil $(‘a.zoom’).easyZoom(); listo.
La imagen a la que le aplicamos el zoom
<p><a href="imagengrande.jpg" class="zoom"><img src="miniatura.jpg" alt="Descripcion imagen"></a></p>
Como ya podéis comprobar en este código la imagen minuatura tiene asociado un link que al pasar por encima de él como tiene clase zoom se va a comportar como un zoom de Easy Zoom, mostrándonos ampliada la imagen justo de la posición de nuestro ratón.
Ahora un poco de estilo a nuestra «lupa» de zoom
body, table, input, textarea, select, li, button { font:1em "Lucida Sans Unicode", "Lucida Grande", sans-serif; line-height:1.5em; color:#333; } body{ font-size:12px; background:#CCC; } img{ border:0 } #container{ padding:30px; } #easy_zoom{ width:600px; height:400px; border:5px solid #eee; background:#fff; color:#333; position:absolute; top:60px; left:400px; overflow:hidden; -moz-box-shadow:0 0 10px #777; -webkit-box-shadow:0 0 10px #777; box-shadow:0 0 10px #777; line-height:400px; text-align:center; }
Web del creador, Easy zoom:
https://www.easyzoom.com/features
Ejemplo del uso del Easy zoom:
- 5 Pasos para mejorar el SEO de tu sitio rápidamente - septiembre 21, 2023
- ¿Cómo optimizar el contenido para el ranking de búsqueda? - noviembre 29, 2022
- Glosario de términos de marketing - mayo 22, 2022