Buscar temas sin respuesta | Ver temas activos Fecha actual 24 Oct 2017 04:52



Responder al tema  [ 8 mensajes ] 
 Visor de Fotos en diapositivas centradas 
Autor Mensaje
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.


07 Jun 2013 12:49
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>


13 Jun 2013 20:30
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.


17 Jun 2013 08:26
Site Admin

Registrado: 14 Sep 2012 07:50
Mensajes: 36
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


17 Jun 2013 19:01
Perfil WWW
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


18 Jun 2013 14:22
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


19 Jun 2013 16:56
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"/>


20 Jun 2013 19:54
Simplemente indicar que el invitado anterior soy yo, josemar20000 que no sé por qué me ha puesto lo de invitado.


23 Jun 2013 23:09
Mostrar mensajes previos:  Ordenar por  
Responder al tema   [ 8 mensajes ] 

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado


No puede abrir nuevos temas en este Foro
No puede responder a temas en este Foro
No puede editar sus mensajes en este Foro
No puede borrar sus mensajes en este Foro

Buscar:
Saltar a:  
cron
Desarrollado por phpBB® Forum Software © phpBB Group
Designed by ST Software for PTF.
Traducción al español por Huan Manwë para phpBB-Es.COM