Foros del Web » Programando para Internet » Javascript »

abrir imagen en popup

Estas en el tema de abrir imagen en popup en el foro de Javascript en Foros del Web. Hace mucho consegui el siguiente codigo. lo que haces es abrirte una serie de imagenes en un popup, que pasan al presionar sobre siguiente o ...
  #1 (permalink)  
Antiguo 06/09/2004, 11:43
 
Fecha de Ingreso: diciembre-2003
Ubicación: lanus
Mensajes: 78
Antigüedad: 20 años, 11 meses
Puntos: 0
abrir imagen en popup

Hace mucho consegui el siguiente codigo.
lo que haces es abrirte una serie de imagenes en un popup, que pasan al presionar sobre siguiente o anterior...
El tema es que no se como hacer para que se abra la ventna, no se si falta un pedazo...
el problema es que no se donde realizarl el hipervinculo para que me abra dicha ventana popup con la lista de imagenes...
el codigo es este:
por favor, lo nesecito de verdad!!!!!


<script language="javascript">
//Ventana ajustada a foto versión 2 por tunait
var estilos = 'estilos.css' //nombre o ruta de hoja de estilos
var titulo = "Galería de fotos" //título de la ventana popup
afotos=new Array()
afotos[0]="fotos/tibidabo.jpg"
afotos[1]="fotos/gato.jpg"
afotos[2]="fotos/paloma.jpg"
afotos[3]="fotos/alenanene.jpg"


var ventana
function afoto(cual)
{
if(ventana){ventana.close()}
buscar(cual)
ventana=window. open('','ventana','resize=yes,scrollbars=no,resiza ble=yes')
ventana.document.writeln ('<html><head><link href="' + estilos + '" rel="stylesheet" type="text/css">')
ventana.document.writeln('<title>' + titulo + '</title></head>')
ventana.document.writeln('<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow:hidden"><div align="center"><img id="foto" alt="mi foto" src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)" onClick="if(opener.cont==opener.afotos.length-1){opener.cont=0}else{opener.cont++};document.getE lementById(\'foto\').src =opener.afotos[opener.cont];return false" >')
ventana.document.writeln('<br /><a href="#" onClick="if(opener.cont==0){opener.cont=opener.afo tos.length-1}else{opener.cont--};document.getElementById(\'foto\').src =opener.afotos[opener.cont];return false">anterior</a>')
ventana.document.write(' | <a href="#" onClick="if(opener.cont==opener.afotos.length-1){opener.cont=0}else{opener.cont++};document.getE lementById(\'foto\').src =opener.afotos[opener.cont];return false">siguiente</a></div>')
ventana.document.writeln ('</body></html>')
ventana.document.close()
ventana.document.onmousedown=clik
}
var cont

function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho+12,alto+78)
ventana.moveTo((screen.width - ancho)/2,(screen.height - (alto+78))/2)

}
function buscar(que)
{
for(c=0;c<afotos.length;c++)
{
if(afotos[c]==que)
{cont= c;
return cont
break}
}
}
function cursor(){
if(navigator.appName=="Netscape"){var manita='pointer'}
else{var manita='hand'}
for (m=0;m<document.getElementsByTagName('a').length;m ++){
document.getElementsByTagName('a')[m].className='verEjemplo'}
}
function clik() {
if (ventana.event.button== 2 ) {
ventana.alert( ' NOP' );
}
}
</script>
  #2 (permalink)  
Antiguo 06/09/2004, 11:57
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 3 meses
Puntos: 381
Hola dnmpatricio

Mira, es muy sencillo:

Cita:
Ejemplo de llamada a la función desde un texto o enlace:

<a href= "javascript:afoto('fotos/tibidabo.jpg'');return false" > Tibidabo </a>

Ejemplo de llamada desde una imagen:

<a href= "javascript:afoto('fotos/tibidabo.jpg');return false" > <img src="tibidabo.jpg"></a>
Tienes ampliadas las instrucciones de uso del script, si quieres, aquí http://javascript.tunait.com/javascr...?s=popupfotos2

Un saludo
  #3 (permalink)  
Antiguo 07/09/2004, 11:41
 
Fecha de Ingreso: diciembre-2003
Ubicación: lanus
Mensajes: 78
Antigüedad: 20 años, 11 meses
Puntos: 0
ok, gracias.. una ultima consulta

ok.. ahora tengo una preguntita teorica mas que nada:
suponiendo que quiero tener varias listas de imagenes, tendria que agregar Arrays como desee:

afotos=new Array()
afotos[0]="fotos/tibidabo.jpg"
afotos[1]="fotos/gato.jpg"
afotos[2]="fotos/paloma.jpg"
afotos[3]="fotos/alenanene.jpg"

afotos=new Array()
afotos[0]="fotos/tibidabo.jpg"
afotos[1]="fotos/gato.jpg"
afotos[2]="fotos/paloma.jpg"
afotos[3]="fotos/alenanene.jpg"

ahora... nesecitaria poner unos 80 Arrays.. esto va a alentar la carga de la pagina, o puede traer alguna consecuencia de mal funcionamiento..
no se si me explico???
  #4 (permalink)  
Antiguo 07/09/2004, 13:03
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 3 meses
Puntos: 381
80 arrays? pues no sé, de muchos elementos cada uno?

El tema de que vaya lento dependerá del peso total en kb que le quede al documento.

Qué necesitas, distintas galerías?
  #5 (permalink)  
Antiguo 07/09/2004, 14:32
 
Fecha de Ingreso: diciembre-2003
Ubicación: lanus
Mensajes: 78
Antigüedad: 20 años, 11 meses
Puntos: 0
Claro, el tema es asi
es una pagina de antiguedades. En "Porcelanas" hay fotos pequeñas de las antiguedades con su descripcion...
1) al presionar sobre una foto pequeña se abre una ventana pop up, con 5 imagenes mas de ese mismo objeto de distintos angulos...

Esto lo quiero hacer dentro de "Porcelanas" con 20 fotos pequeñas mas, y aparte tengo 6 categorias mas....
  #6 (permalink)  
Antiguo 08/09/2004, 02:44
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 3 meses
Puntos: 381
Entiendo.

Sí que se podría, pero hay que hacerle algunos retoques al script.

En cuanto lo tenga te lo dejo aquí
  #7 (permalink)  
Antiguo 09/09/2004, 16:18
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 3 meses
Puntos: 381
He adaptado el script, pero ahora releyéndote veo que me he quedado corta

a ver... la idea es:

20 fotos de "porcelana"
la imagen 1 tiene asociadas 5 fotos del mismo objeto (físico) desde distintos ángulos

así por cada una de las 20 de porcelana hay 5 imágenes desde los ángulos

total de imagenes de porcelana (20 x 5) = 100 imágenes relacionadas

Y esto, 6 veces

por ejemplo:

var porcelanas = new Array()
porcelanas[0] = "unaimagen.jpg"
....
porcelanas[19] = "otraimagen.jpg"

al pinchar en la porcelanas[0] abrirá la popup con la primera imagen de la primera vista de las 5 imágenes de esa porcelana ¿es esí?

... y en la misma página quieres que hayan otras colecciones, por ejemplo....

var macetas = new Array()
macetas[0] = "unaimagen.jpg"
...
macetas[19] = "otraimagen.jpg"

y con el array macetas, lo mismo

Dime si es así. Cuanto más me lo definas antes acabaremos

Un saludo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:45.