home Foro de soporte Ayuda para webmasters HTML avanzado
 
Codigo agrandar imagen
#1 ·

Hola:

Estoy buscando un codigo que permita que al hacer cilck en una imagen esta se amplie. Supongo que habrá algun código html que permita hacerlo.

Gracias de antemano.


Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 14
Desde: 03/Ago/2013
·
#2 ·

Con JavaScript y el evento onClick, puede modificar las propiedades de la imagen:

Código:
<img src="ruta-img" alt="imagen" onClick="this.style.height = '200px'; this.style.width = '200px';" />


Moderador del foro
Moderador del foro
Haz clic para ver el perfil del usuario
Mensajes: 2.734
Desde: 10/Ene/2009
· ·
#3 ·

Esta bien pero no es exactamente lo que buscaba. Habría alguna forma de hacerlo con Java Script o Jquery en la que  saliera un preload y luego muestre la imagen. Y una vez que quieras volver a seguir navegando hacer click en una parte de la pantalla, ya sea un simbolo o fuera de la imagen?

Gracias.

Un saludo.


Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 14
Desde: 03/Ago/2013
·
#4 ·

Busca en Google galerías jQuery. Aquí tienes un recopilatorio bastante amplio.



Moderador del foro
Moderador del foro
Haz clic para ver el perfil del usuario
Mensajes: 2.734
Desde: 10/Ene/2009
· ·
#5 ·

Creo que lo que tratas de hacer es algo como esto:


<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="css/index.css"></head><body><inputid="image"type="file"placeholder="Load an image"><br><buttonclass="plus">+</button><buttonclass="minus">-</button><br><divclass="container"></div><scripttype="text/javascript"src="js/index.js"></script></body></html>document.addEventListener('DOMContentLoaded',function(){const imgInput = document.getElementById('image');const container = document.querySelector('.container');const img = document.createElement('img');const plusButton = document.querySelector('.plus');const minusButton = document.querySelector('.minus'); imgInput.addEventListener('change', setImage); plusButton.addEventListener('click', increaseSize); minusButton.addEventListener('click', reduceSize); img.addEventListener('click', fullScreen);function setImage(){ img.file =this.files[0]; img.classList.add('imageLoaded'); container.appendChild(img);const reader =newFileReader(); reader.onload =(function(img){returnfunction(e){ img.src = e.target.result;};})(img); reader.readAsDataURL(this.files[0]);}function increaseSize(){ img.style.width =`${img.width +=100}px`; img.style.height =`${img.height +=50}px`;}function reduceSize(){if(img.width <=100|| img.height <=50)return; img.style.width =`${img.width -=100}px`; img.style.height =`${img.height -=50}px`;}function fullScreen(){if(this.width === window.innerWidth){ img.style.width =(window.innerWidth /2)+"px";}else{ img.style.width = window.innerWidth +"px";}}});

document.addEventListener('DOMContentLoaded',function(){const imgInput = document.getElementById('image');const container = document.querySelector('.container');const img = document.createElement('img');const plusButton = document.querySelector('.plus');const minusButton = document.querySelector('.minus'); imgInput.addEventListener('change', setImage); plusButton.addEventListener('click', increaseSize); minusButton.addEventListener('click', reduceSize); img.addEventListener('click', fullScreen);function setImage(){ img.file =this.files[0]; img.classList.add('imageLoaded'); container.appendChild(img);const reader =newFileReader(); reader.onload =(function(img){returnfunction(e){ img.src = e.target.result;};})(img); reader.readAsDataURL(this.files[0]);}function increaseSize(){ img.style.width =`${img.width +=100}px`; img.style.height =`${img.height +=50}px`;}function reduceSize(){if(img.width <=100|| img.height <=50)return; img.style.width =`${img.width -=100}px`; img.style.height =`${img.height -=50}px`;}function fullScreen(){if(this.width === window.innerWidth){ img.style.width =(window.innerWidth /2)+"px";}else{ img.style.width = window.innerWidth +"px";}}});body {margin:0;padding:0;}.container {margin: auto;}.imageLoaded {width:50%;height: auto;}


<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="css/index.css"></head><body><inputid="image"type="file"placeholder="Load an image"><br><buttonclass="plus">+</button><buttonclass="minus">-</button><br><divclass="container"></div><scripttype="text/javascript"src="js/index.js"></script></body></html>



iluminacion para eventos


Usuario Novato
Usuario Novato
Haz clic para ver el perfil del usuario
Mensajes: 1
Desde: 07/Nov/2019
·
#6 ·

Buenas tardes Juan.

Te pasi el código para que puedas hacer un Zoom de la imagen.

Los pasos son los siguientes:

CódigoHTML:

<div class="img-zoom-container">
 <img id="myimage" src="<tu imagen>" width="300" height="240" alt="Girl">
 <div id="myresult" class="img-zoom-result"></div>
</div>



Código CSS:

{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;
}


Código JavaScript:

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 iniciar Zoom:

<script>
imageZoom("myimage""myresult");
</script>

Espero haberte ayudado.

Raúl

Aerotermia


Usuario Novato
Usuario Novato
Haz clic para ver el perfil del usuario
Mensajes: 2
Desde: 25/Abr/2019
· ·
Foro de soporte · Ayuda para webmasters · HTML avanzado
Opciones:
Subscríbete a este tema
Date de baja de este tema
Ir al subforo:  
TU NO PUEDES Escribir nuevos temas en este foro
TU NO PUEDES Responder a los temas en este foro
TU NO PUEDES Editar tus propios mensajes en este foro
TU NO PUEDES Borrar tus propios mensajes en este foro
Ahora son las 08:44 UTC+02:00 DST
Temas similares
 I FotoPTemaMensajesÚltima respuesta
No Hay mensajes nuevosHaz clic para ver el perfil del usuario1125/Oct/2003, 20:07
 Ir al último mensaje del tema