Problema al aumentar tamaño de imagenes

tejedor_75 · #1 (**permalink**) 01/06/2013, 11:32

Que hay futuros colegas:

Antes de nada me gustaria agradeceros a todos vuestra colaboración, no en este post, que tambien (faltaba mas), sino a todos los que colaborais en este, asi como en otros foros, facilitandonos el aprendiaje y en muchos casos la vida.

Llevo poco tiempo estudiando/practicando javascript, y no mucho mas informática, pero muchas de las dudas que me han surgido/problemas con los que me he encontrado las he podido resolver gracias al contenido de este foro. Es por ello, que tras buscar y no encontrar nada me he decidido a haceros la siguiente consulta:

Estoy haciendo una práctica para el instituto. El enunciado exige una página web que contiene una serie de fotografias, las cuales al ser pinchadas deben aumentar su tamaño al máximo posible teniendo en cuenta el tamaño de la ventana.

El código js que estoy utilizando es este:

function aumentar(idImagen) {

document.getElementById(idImagen).width = 0.7*(window.innerHeight);

document.getElementById(idImagen).height = (window.innerHeight);

document.getElementById(idImagen).scrollIntoView(t rue);

}

function reducir(idImagen) {

document.getElementById(idImagen).width = 120;

document.getElementById(idImagen).height = 170;

}

Todo funciona bien, la imagen aumenta al máximo al hacer click sobre ella, y el scroll se situa a la altura perfecta. El problema esta en que la imagen aumentada no se superpone a las demas que la rodean. Es decir, la imagen aumenta su tamaño correctamente pero queda tapada (al menos parcialmente) por el resto de fotografias.

¿Cómo podria solucionarlo?

ggomez91 · #2 (**permalink**) 01/06/2013, 22:13

se me ocurren dos formas, una es aumentando el z-index de la imagen que estás agrandando de forma que se ponga frente a las otras. La otra es ocultar las imagenes que no se estan agrandando con .style.visibility = "hidden". Saludos!

benjamin71955 · #3 (**permalink**) 05/02/2014, 22:02

Sé que éste tema es ya algo viejo, pero no está demás ayudar.

Estaba leyendo el téma en el foro e hice el codigo, quizas les sea de ayuda a alguien.

<html>
<head>
<style>
* {
margin: 0px;
}
#imgMostrar {
-moz-box-shadow: 0px 0px 10px white;
-ms-box-shadow: 0px 0px 10px white;
-o-box-shadow: 0px 0px 10px white;
-webkit-box-shadow: 0px 0px 10px white;
cursor: pointer;
}
img.img {
width: 200px;
cursor: pointer;
height: 150px;
}
</style>
<script>
function aumentar(img){
contenedor=document.getElementById("contenedor");
contenedor.style.backgroundColor = 'rgba(0,0,0,0.9)';
contenedor.style.width = '100%';
contenedor.style.height = '100%';
contenedor.style.position = 'fixed';
contenedor.innerHTML = "<br><br><br><center><img id='imgMostrar' width='700px' src="+img.src+"></center>";
contenedor.onclick = quitar;
}
function quitar(){
window.location.reload();
}
</script>
</head>
<body>
<div id="contenedor">
</div>
<br>
<br>
<br>

   <img class="img" src="http://2.bp.blogspot.com/-gcelxN6QZBc/UHMZ-fxU6pI/AAAAAAAAVLA/7iYRQQUuMw0/s1600/Fondos%2Bde%2BMujeres%2BHermosas%2B-%2BWww.10Pixeles.Com%2B(12).jpgg" onclick="aumentar(this)">
   <img class="img" src="http://1.bp.blogspot.com/-G3hL-l1GNJc/T2KYtzxNoiI/AAAAAAAAWs0/cI1JxQWsSkQ/s1600/Camila-Davalos-Hot_01.jpg" onclick="aumentar(this)">
</body>
</html>

Simplifiqué el codigo. Modifiquenlo a la manera de ustedes.