En este tuturial, os explicaré cómo hacer un efecto lupa en una imagen, es decir, hacer zoom por donde pases el ratón. Como casi siempre, esto se consigue con JQuery.
Como veis Jquery es bastante potente y te permite hacer cosas visualmente atractivas. Podeis echar un vistazo a otros de mis tutoriales para aprender más efectos interesantes para tu página web: «Matener el menú en el top al hacer scroll«, «Scroll vertical suave«, «Cómo hacer un menú responsivo«, «Efecto Parallax Scrolling«… entre otros. Seguiré subiendo más tutoriales de diseño web, para que vuestras páginas web sean muy atractivas.
De momento, volvemos al lio.
Aquí os dejo una DEMOSTRACIÓN en funcionamiento de este tutorial.
1. Llamada a Jquery
Como siempre en estos casos, lo primero que debeis realizar es la llamada a Jquery, y en este caso al plugin:
<script src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.mlens-1.2.min.js"></script>
Para realizar este ejemplo, vais a necesitar la misma imagen en diferentes tamaños, en concreto, la imagen mayor, debe ser el doble de grande que la pequeña; para ello, podeis utilizar las que he escogido yo:
2. Código HTML
Para el html, teneis que incluir las siguientes lineas dentro de vuestro «». Esencialmente teneis que asignar un id a la imagen para que posteriormente, con jquery y llamando a ese id, nos haga el efecto.
Primero se linka la imagen pequeña, con «data-big=»imagen_1280px.jpg»» llamamos a la imagen grande, y con «data-overlay=»fondo.png»», llamamos a la imagen que va a servirnos de fondo para la lupa.
<div id="contenido"> <img id="botella" src="imagen_640px.jpg" alt="botella con zoom" data-big="imagen_1280px.jpg" data-overlay="fondo.png" /> </div>
3. Código CSS
Las css, en este caso son opcionales, podeis poner las que vosotros querais, o los estilos que mejor de adecuen a vuestro proyecto.
#contenido {
position: relative;
width: 640px;
height: auto;
margin: 20px auto;
border: 12px solid #fff;
border-radius: 10px;
box-shadow: 1px 1px 5px rgba(50,50,50 0.5);
}
4. Implementación del plugin para hacer el efecto lupa / zoom
Por último, llegamos al código jquery. Como veis tiene algunas opciones muy facilitas de implementar:
<script type="text/javascript">
$(document).ready(function()
{
$("#botella").mlens(
{
imgSrc: $("#botella").attr("data-big"), // path of the hi-res version of the image
lensShape: "circle", // shape of the lens (circle/square)
lensSize: 180, // size of the lens (in px)
borderSize: 4, // size of the lens border (in px)
borderColor: "#fff", // color of the lens border (#hex)
borderRadius: 0, // border radius (optional, only if the shape is square)
imgOverlay: $("#botella").attr("data-overlay"), // path of the overlay image (optional)
overlayAdapt: true // true if the overlay image has to adapt to the lens size (true/false)
});
});
</script>
Os dejo el link a su página oficial: PLUGIN MLENS
Hasta aquí este tutorial. Recuerda que si quieres que haga un tutorial sobre algo en concreto, puedes comentarme.
Compártelo si te ha sido útil.
