Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Zoom en imagen
#1
Hola, les dejo el código completo para poder usar zoom en imágenes como en Mercado Libre, solo hay que adaptar a sus necesidades

Código:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}

.img-zoom-container {
 position: relative;
}

.img-zoom-lens {
 position: absolute;
 border: 1px solid #d4d4d4;
 /*set the size of the lens:*/
 width: 40px;
 height: 40px;
}

.img-zoom-result {
 border: 1px solid #d4d4d4;
 /*set the size of the result div:*/
 width: 300px;
 height: 300px;
}
</style>
<script>
function imageZoom(imgID, resultID) {
 var img, lens, result, cx, cy;
 img = document.getElementById(imgID);
 result = document.getElementById(resultID);
 /*create lens:*/
 lens = document.createElement("DIV");
 lens.setAttribute("class", "img-zoom-lens");
 /*insert lens:*/
 img.parentElement.insertBefore(lens, img);
 /*calculate the ratio between result DIV and lens:*/
 cx = result.offsetWidth / lens.offsetWidth;
 cy = result.offsetHeight / lens.offsetHeight;
 /*set background properties for the result DIV:*/
 result.style.backgroundImage = "url('" + img.src + "')";
 result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
 /*execute a function when someone moves the cursor over the image, or the lens:*/
 lens.addEventListener("mousemove", moveLens);
 img.addEventListener("mousemove", moveLens);
 /*and also for touch screens:*/
 lens.addEventListener("touchmove", moveLens);
 img.addEventListener("touchmove", moveLens);
 function moveLens(e) {
   var pos, x, y;
   /*prevent any other actions that may occur when moving over the image:*/
   e.preventDefault();
   /*get the cursor's x and y positions:*/
   pos = getCursorPos(e);
   /*calculate the position of the lens:*/
   x = pos.x - (lens.offsetWidth / 2);
   y = pos.y - (lens.offsetHeight / 2);
   /*prevent the lens from being positioned outside the image:*/
   if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
   if (x < 0) {x = 0;}
   if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
   if (y < 0) {y = 0;}
   /*set the position of the lens:*/
   lens.style.left = x + "px";
   lens.style.top = y + "px";
   /*display what the lens "sees":*/
   result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
 }
 function getCursorPos(e) {
   var a, x = 0, y = 0;
   e = e || window.event;
   /*get the x and y positions of the image:*/
   a = img.getBoundingClientRect();
   /*calculate the cursor's x and y coordinates, relative to the image:*/
   x = e.pageX - a.left;
   y = e.pageY - a.top;
   /*consider any page scrolling:*/
   x = x - window.pageXOffset;
   y = y - window.pageYOffset;
   return {x : x, y : y};
 }
}
</script>
</head>
<body>

<h1>Image Zoom</h1>

<p>Mouse over the image:</p>

<div class="img-zoom-container">
 <img id="myimage" src="img_girl.jpg" width="300" height="240">
 <div id="myresult" class="img-zoom-result"></div>
</div>

<p>The image must be placed inside a contianer with relative positioning.</p>
<p>The result can be put anywhere on the page, but must have the class name "img-zoom-result".</p>
<p>Make sure both the image and the result have IDs. These IDs are used when a javaScript initiates the zoom effect.</p>

<script>
// Initiate zoom effect:
imageZoom("myimage", "myresult");
</script>

</body>
</html>
DEMO | FUENTE
[Imagen: nuevo_logo.jpg]
Desarrollo Digital
Alejandro Ramirez
Visita mi Blog 
https://alexramirez.ml
WWW
Responder
#2
Este zoom, ¿ te amplia toda la imagen o solo una parte?
Responder
#3
(02-10-2018, 03:22 PM)efbsfcd escribió: Este zoom, ¿ te amplia toda la imagen o solo una parte?

Solo una parte saludos
[Imagen: nuevo_logo.jpg]
Desarrollo Digital
Alejandro Ramirez
Visita mi Blog 
https://alexramirez.ml
WWW
Responder
#4
El codigo deve de ir implementado en la imagen :v, no?
WWW
Responder
#5
sirve muy bien esta herramienta para zooms , la estoy usando ahora mismo
[-] El post de DamianUzcanga tiene 1 Me Gusta de parte de:
  • cmascreativo.ml
Responder
#6
Hola,
Lamentablemente no esta disponible la demo.
Creo que podría ser un buen código para algún estilo de proyecto.
Un saludo.
[Imagen: logo_300.png]
[-] El post de fercol tiene 1 Me Gusta de parte de:
  • cmascreativo.ml
Responder
#7
(05-10-2018, 06:46 AM)fercol escribió: Hola,
Lamentablemente no esta disponible la demo.
Creo que podría ser un buen código para algún estilo de proyecto.
Un saludo.


Si esta disponible la DEMO la acabo de visualizar.
[-] El post de Vicen tiene 1 Me Gusta de parte de:
  • cmascreativo.ml
WWW
Responder
#8
muy interesante vere si lo coloc en mi pagina web, gracias por este aporte
[Imagen: Nexo_Firma.gif]
[-] El post de ReyNexo23 tiene 1 Me Gusta de parte de:
  • cmascreativo.ml
WWW
Responder


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Solucionado: escribir en una imagen php firmas Sergio09 2 296 13-12-2016, 08:33 PM
Último mensaje: DarkMaster
  Utilizar un loading o imagen de carga con CSS torgar22 2 495 19-12-2014, 05:09 PM
Último mensaje: amplox
  Link online para obtener html de una imagen desde word u otra página canpios 0 391 17-12-2014, 10:29 PM
Último mensaje: canpios
  Script personalizable en PHP para subir una imagen al servidor torgar22 0 869 23-11-2014, 11:26 PM
Último mensaje: torgar22
  Insertar imagen desde url [php] celticslment 7 825 14-10-2014, 03:37 AM
Último mensaje: AbaddonOrmuz
  Diseñadora de Logos, Banners y Cualquier Imagen, Diseños al gusto. likeycomparte 0 403 30-09-2014, 08:30 AM
Último mensaje: likeycomparte
  Cambiar el Zoom de mi sitio web Cine-lan 4 590 17-07-2014, 06:04 PM
Último mensaje: Vicen
  Cómo hacer su propia rotación de imagen en php jesuli 28 2,856 07-03-2014, 01:07 AM
Último mensaje: KeviNxDTM
  Colocar una imagen encima de otra HTML Netohg 8 4,402 01-01-2014, 04:26 PM
Último mensaje: Gonzalo
  Imagen de fondo o Backgrond HTML Netohg 7 979 14-10-2013, 04:11 PM
Último mensaje: postingafull



Usuarios navegando en este tema: 1 invitado(s)