Hacer click en las fotos para hacerlas más grandes con javascript y css

enarge_photo.jpg

En ocasiones ponemos varias fotos en una publicación y de pronto "no lucen" lo suficiente porque son más pequeñas que nuestra pantalla, en algunos frameworks como por ejemplo AMP de Google ya lo trae por defecto, que le picas a la foto y se hace lo más grande posible a lo alto o ancho de tu pantalla, desplegando más detalles de la foto.

Para implementar manualmente esto se puede hacer con puro javascript y css, sin mayor problema. Entonces lo primero es que, digamos que las fotografías están todas con la clase .image

El javascript:

(function() { const imgs = document.querySelectorAll('img.image'); const fullPage = document.querySelector('div#lafoto');      imgs.forEach(img => { img.addEventListener('click', function() {  fullPage.style.backgroundImage = 'url(' + img.src + ')';  fullPage.style.display = 'block'; }); }); })();

Ahí, obtenemos todas las imágenes con la clase image y luego le añadimos un evento que al dar click, establezca la foto de fondo de un contenedor llamado #lafoto

El css:

div#lafoto { display: none;  position: fixed; z-index: 9999; top: 0; left: 0; width: 100vw; height: 100vh;   background-size: contain; background-repeat: no-repeat no-repeat;   background-position: center center; background-color: black; cursor:pointer; }

Por último, el html:

<div id="lafoto" onclick="this.style.display='none';"></div>

Eso es todo, a cada imagen al dar click la hará del tamaño de la pantalla, ya sea a lo ancho o alto, conservando la proporción.

enarged_photo.jpg

Eso es todo, las imágenes serían puestas normalmente, sólo añadiendo la clase image.

+ fotos / videos

Almacenado en css, Desarrollo Web, javascript

por Jorge Martínez Mauricio :)

blog / fotos / archivo

Hacer click en las fotos para hacerlas más grandes con javascript y css

tar.mx es un blog sobre fotografía, tecnología y otras chunches

modificado martes 5 de julio de 2022, 10:21

cuentame