Los Foros
http://foros.espaciolatino.com/

Visor de Fotos en diapositivas centradas
http://foros.espaciolatino.com/viewtopic.php?f=5&t=165
Página 1 de 1

Autor:  josemar2000 [ 07 Jun 2013 12:49 ]
Asunto:  Visor de Fotos en diapositivas centradas

Hola, estoy haciendo una galería de imágenes y necesito que al pinchar en cualquiera de las miniaturas se abra la foto correspondiente ampliada, pero que verticalmente quede sobre la miniatura a la que pertenece, que es sobre la que se ha pinchado.
Lo que he conseguido hasta ahora es que la imagen grande se abra sobre una posición fija que le he dado yo, pero eso no me interesa porque depende de la posición de la miniatura, hay veces que la grande me queda muy por encima o por debajo y no la veo.

Autor:  CTW [ 13 Jun 2013 20:30 ]
Asunto:  Re: Visor de Fotos en diapositivas centradas

No es difícil, basta con leer la posición de la pequeña y restarle la altura de la grande para situar esta por encima de la miniatura.
Se trata de colocar la imagen grande en una posición dada por (posición de la pequeña) - (altura de la grande)
Si no quieres que se vea la pequeña al abrir la grande, a esta posición le sumas la altura de la pequeña.
Ejemplo
function datosimg(idImg, idGr, urlGr)
{
var imagenPq= document.getElementById(idImg)
var imagenGr = new Image();
imagenGr.onload = function() {
var pSup, pIzq
pSup = imagenPq.offsetTop - this.height
pLeft = imagenPq.offsetLeft
img = document.getElementById(idGr)
img.src = this.src
img.style.top = String(pSup)+"px"
img.style.left = String(pLeft)+"px"
img.style.visibility = "visible"
}
imagenGr.src = urlGr

}
</script>
</head>
<body>
<img id="imgGr" src="" style="visibility: hidden; position: absolute; top: 0px; left: 0px"/>
<p>&nbsp;</p>
<p></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<a href="javascript:datosimg('imgPq','imgGr','imggr2.jpg')">
<img id="imgPq" src="ipgpq.jpg" width="160" height="116" /></a></p>
</body>
</html>

Autor:  josemar20000 [ 17 Jun 2013 08:26 ]
Asunto:  Re: Visor de Fotos en diapositivas centradas

Este código es válido cuando tienes una sóla miniatura y yo tengo varias miniaturas con su correspondiente imagen ampliada, y lo que necesito es que cuando pinches en una miniatura, aparezca la foto ampliada encima de su miniatura y cuando pinches en otra miniatura aparezca encima de esta, su foto ampliada y así con todas las miniaturas.

Autor:  editor [ 17 Jun 2013 19:01 ]
Asunto:  Re: Visor de Fotos en diapositivas centradas

Claro, es una muestra de como podrías hacer con cada miniatura. Aplícalo a cada miniatura. Te lo explico:
El código calcula la distancia en la que debe colocarse la imagen grande (ImgGr).
Si te fijas la función JavaScript
parseInt(imagenPq.offsetTop) posición vertical de la miniatura
parseInt(imagenPq.offsetLeft) posición horizontal de la miniatura

Luego calcula para la imagen grande su posición que será por encima de la miniatura una distancia igual a su altura (la de la imagen grande)
pSup = parseInt(imagenPq.offsetTop) - parseInt(this.height)
pLeft = parseInt(imagenPq.offsetLeft

Luego le colocas los atributos de posición calculados a la imagen grande
img.style.top = String(pSup)+"px"
img.style.left = String(pLeft)+"px"

No se los detalles de tu proyecto, pero en este ejemplo cada miniatura lleva su propio ID y llama a esta función con su ID el ID de la imagen grande y la url de la imagen grande. Si el ID de la imagen grande es uno solo pues cada miniatura abrirá su foto ampliada y cerrará la que hubiera abierta. Es decir, en cada momento solo podrá haber una imagen grande abierta.

Pon varias miniaturas, cada una con un Id y llama a esta función en cada una de ellas, debe funcionar.
Saludos

Autor:  josemar20000 [ 18 Jun 2013 14:22 ]
Asunto:  Re: Visor de Fotos en diapositivas centradas

Te mando la parte del código que he modificado para que veas si es correcto
En esta línea le he añadido +125 para que la imagen grande me cubra le pequeña y esta por tanto quede debajo y no se vea
pSup = parseInt(imagenPq.offsetTop) - parseInt(this.height)+125
En el caso de las imagenes he puesto dos como ejemplo y en el primer parámetro de la funcion he puesto el id de la imagen pequeña que es único, distinto para cada una de ellas y en el último la url de la imagen grande
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<a href="javascript:datosimg('foto1','imgGr','imggr1.jpg')">
<img id="foto1" src="ipgpq1.jpg" width="160" height="116" /></a>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<a href="javascript:datosimg('foto2','imgGr','imggr2.jpg')">
<img id="foto2" src="ipgpq2.jpg" width="160" height="116" /></a></p>

Y ya está no hay que cambiar nada más

Autor:  CTW [ 19 Jun 2013 16:56 ]
Asunto:  Re: Visor de Fotos en diapositivas centradas

Pues si esa es la idea. Lo de los 125 pixels lo puedes automatizar por si cambias el tamaño de las miniaturas

pSup = parseInt(imagenPq.offsetTop) - parseInt(this.height) +parseInt(imagenPq.height) + 5

Como ves quedan 5 pixels de "desajuste" provenientes de bordes y otros detalles. Si se te quedan cortos súbelos hasta que quede a tu gusto

Saludos

Autor:  Invitado [ 20 Jun 2013 19:54 ]
Asunto:  Re: Visor de Fotos en diapositivas centradas

Me parece buena idea la de automatizarlo, así que ya lo he modificado.
Me he creado una función para cerrar la imagen grande, pinchando sobre ella si está abierta, cuando quiero cerrarla y no quiero abrir ninguna otra.

function cerrarImagen(imgGr){
if (document.getElementById(imgGr).style.visibility == 'hidden'){
document.getElementById(imgGr).style.visibility = 'visible';
}else{
document.getElementById(imgGr).style.visibility = 'hidden';
}
}

Código HTML
<img id="imgGr" onClick="javascript:cerrarImagen(this.id)" src="" title="Pulse para cerrar" style="visibility: hidden; position:absolute; top: 0px; left: 0px"/>

Autor:  josemar20000 [ 23 Jun 2013 23:09 ]
Asunto:  Re: Visor de Fotos en diapositivas centradas

Simplemente indicar que el invitado anterior soy yo, josemar20000 que no sé por qué me ha puesto lo de invitado.

Página 1 de 1 Todos los horarios son UTC + 1 hora
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/