Mostrar imagen grande en galeria de imagenes

Buenas, he creado una galeria de imgenes y quiero que al pinchar en la foto esta se haga ms grande. Pero no consigo mostrar la foto en grande te paso el código a ver si me puedes "echar una mano". Gracias
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Galeria Javascript</title>
<script language="javascript">
//Array en la que debemos incluir
// la ruta a todas las imágenes de nuestro album
var misImagenes= new Array(3)
  misImagenes [0]= "celtiberos/1.jpg";
  misImagenes [1]= "celtiberos/5.jpg";
  misImagenes [2]= "celtiberos/3.jpg";
  misImagenes [3]= "celtiberos/4.jpg";
var i = 0;
//funcion de carga de la primera imagen
function cargarImagen(){
  document.imgSrc.src = misImagenes ;
}
function anterior(){
  if(i<1){
    var NumImagen = i
  } else {
    var NumImagen = i-=1;
  }
  document.imgSrc.src = misImagenes[NumImagen];
}
function siguiente(){
  if(i>2){
    var NumImagen = i
  } else {
    var NumImagen = i+=1;
  }
  document.imgSrc.src = misImagenes[NumImagen];
}
//Llamar a la función
window.onload=cargarImagen;
</script>
<style type="text/css">
body {
    margin-top:40px;
}
td a {
    font:9px Verdana, Arial, Helvetica, "sans-serif";
    color:#FFFFFF;
    text-decoration:none;
    }
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script>
PositionX = 100;
PositionY = 100;
defaultWidth = 500;
defaultHeight = 500;
var AutoClose = true;
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width=512,height=368,left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=512,height=368,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Cargando ...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=520;');
writeln('height=400;');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images["imagenes"].width;');writeln('window.innerHeight=document.images["imagenes"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=ffffff scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="imagenes" src='+imageURL+' style="display:block"></body></html>');
close();
}}
</script>
</head>
<body>
<div id="Layer2" style="position:absolute; left:28px; top:90px; width:144px; height:91px; z-index:2">
<img src="imgSrc" alt="ImÁgenes de la galeria" name="imgSrc" width="331" height="257" id="imgSrc" onclick="onclick=popImage('imgSrc','Texto alt') " ></div>
<div id="Layer1" style="position:absolute; left:15px; top:359px; width:381px; height:38px; z-index:3">
<table width="400" border="1" cellspacing="0" cellpadding="0" style="background:#666; width:400px; margin: auto;">
<tr>
<td align="center"><a href="#" onclick="anterior();"> < Anterior</a></td>
<td align="center"><a href="#" onclick="siguiente();">Siguiente > </a></td>
</tr>
</table>
</div>
<div style="width:400px; height:300px; margin: auto;"> </div>
</body>
</html>
1

1 respuesta

1
Respuesta de
Te sale algun error?
 Marcelo
no
ya encontré los errores:
1)
function cargarImagen(){
  document.imgSrc.src = misImagenes ;
}
cambialo por
function cargarImagen(){
  document.imgSrc.src = misImagenes[0];
}
y 2)
<img src="imgSrc" alt="ImÁgenes de la galeria" name="imgSrc" width="331" height="257" id="imgSrc" onclick="onclick=popImage('imgSrc','Texto alt') " >
por:
<img src="imgSrc" alt="ImÁgenes de la galeria" name="imgSrc" width="331" height="257" id="imgSrc" onclick="popImage(this.src,'Texto alt') " />
 Lo he probado, y anda en FF e IE
Saludos
Marcelo
hola de nuevo, el problema que tengo de hacerlo asi, es que la imagen me la hce grande en las dimensiones fijas, y yo lo que quiero es que me haga grande la imagen con las dimensiones que tiene la propia imagen. he hecho lo siguiente pero no me la carga, mira:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Galeria Javascript</title>
<script language="javascript">
//Array en la que debemos incluir
// la ruta a todas las imágenes de nuestro album
var misImagenes= new Array(3)
  misImagenes [0]= "celtiberos/4.jpg";
  misImagenes [1]= "celtiberos/5.jpg";
  misImagenes [2]= "celtiberos/6.jpg";
  misImagenes [3]= "celtiberos/7.jpg";
var i = 0;
//funcion de carga de la primera imagen
function cargarImagen(){
  document.imgSrc.src = misImagenes ;
}
function anterior(){
  if(i<1){
    var NumImagen = i
  } else {
    var NumImagen = i-=1;
  }
  document.imgSrc.src = misImagenes[NumImagen];
}
function siguiente(){
  if(i>2){
    var NumImagen = i
  } else {
    var NumImagen = i+=1;
  }
  document.imgSrc.src = misImagenes[NumImagen];
}
//Llamar a la función
window.onload=cargarImagen;
</script>
<style type="text/css">
body {
 margin-top:40px;
}
td a {
 font:9px Verdana, Arial, Helvetica, "sans-serif";
 color:#FFFFFF;
 text-decoration:none;
 }
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script>
PositionX = 100;
PositionY = 100;
defaultWidth = 500;
defaultHeight = 500;
var AutoClose = true;
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width=512,height=368,left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=512,height=368,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Cargando ...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=520;');
writeln('height=400;');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images["imagenes"].width;');writeln('window.innerHeight=document.images["imagenes"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=ffffff scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="imagenes" src='+imageURL+' style="display:block"></body></html>');
close();
}}
</script>
</head>
<body>
<div id="Layer2" style="position:absolute; left:28px; top:90px; width:144px; height:91px; z-index:2">
<a href="prueba:afoto(this.src,'Texto alt')">
<img src="imgSrc" alt="ImÁgenes de la galeria" name="imgSrc" width="331" height="257" id="imgSrc"></a></div>
<div id="Layer1" style="position:absolute; left:15px; top:359px; width:381px; height:38px; z-index:3">
<table width="400" border="1" cellspacing="0" cellpadding="0" style="background:#666; width:400px; margin: auto;">
<tr>
<td align="center"><a href="#" onclick="anterior();"> < Anterior</a></td>
<td align="center"><a href="#" onclick="siguiente();">Siguiente > </a></td>
</tr>
</table>
</div>
</body>
</html>
A parte me he creado un archhivo de javascript con el siguiente codigo, llamado "prueba":
var ventana
var cont=0
var titulopordefecto = "Tu Titulo de la ventana"
function afoto(cual,titulo)
{
if(cont==1){ventana.close();ventana=null}
if(titulo==null){titulo=titulopordefecto}
ventana=window.open('','ventana','resizable=no,sc rollbars=no,width=50,height=50')
ventana.document.write('
<html>
<head>
<title>' + titulo + '</title>
</head>
<body style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no"  onUnload="opener.cont=0">
<div align="center"><a href="javascript:this.close()"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)" style="border:none"></a></div>
')
ventana.document.close()
cont++
}
function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho+5,alto+30)
ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2)
}
esta debería ser tu funcion popup
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('
<html>
<head>
<title>Cargando ...</title>
<style>body{margin:0px;}</style>
');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=520;');
writeln('height=400;');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=' + defaultWidth + ';');writeln('window.innerHeight=' + defaultHeight + ';}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('
</head>
<body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">
')
else writeln('
</head>
<body bgcolor=ffffff scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">
');
writeln('<img name="imagenes" src='+imageURL+' style="display:block" width="'+defaultWidth+'" height="'+defaultHeight+'">
</body>
</html>
');
close();
}}
usa el defaultWidth y defaultHeight para darle el tamaño a la imagen.
Saludos
Marcelo
ME SIGUE SIN FUNCIONAR, MIRA:
<title>Galeria Javascript</title>
<script language="javascript">
//Array en la que debemos incluir
// la ruta a todas las imágenes de nuestro album
var misImagenes= new Array(3)
  misImagenes [0]= "celtiberos/4.jpg";
  misImagenes [1]= "celtiberos/5.jpg";
  misImagenes [2]= "celtiberos/6.jpg";
  misImagenes [3]= "celtiberos/7.jpg";
var i = 0;
//funcion de carga de la primera imagen
function cargarImagen(){
  document.imgSrc.src = misImagenes ;
}
function anterior(){
  if(i<1){
    var NumImagen = i
  } else {
    var NumImagen = i-=1;
  }
  document.imgSrc.src = misImagenes[NumImagen];
}
function siguiente(){
  if(i>2){
    var NumImagen = i
  } else {
    var NumImagen = i+=1;
  }
  document.imgSrc.src = misImagenes[NumImagen];
}
//Llamar a la función
window.onload=cargarImagen;
</script>
<style type="text/css">
body {
 margin-top:40px;
}
td a {
 font:9px Verdana, Arial, Helvetica, "sans-serif";
 color:#FFFFFF;
 text-decoration:none;
 }
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script>
PositionX = 100;
PositionY = 100;
defaultWidth = 500;
defaultHeight = 500;
var AutoClose = true;
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width=512,height=368,left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=512,height=368,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('
<html>
<head>
<title>Cargando ...</title>
<style>body{margin:0px;}</style>
');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=520;');
writeln('height=400;');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=' + defaultWidth + ';');writeln('window.innerHeight=' + defaultHeight + ';}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('
</head>
<body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">
')
else writeln('
</head>
<body bgcolor=ffffff scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">
');
writeln('<img name="imagenes" src='+imageURL+' style="display:block" width="'+defaultWidth+'" height="'+defaultHeight+'">
</body>
</html>
');
close();
}}
</script>
</head>
<body>
<div id="Layer2" style="position:absolute; left:28px; top:90px; width:144px; height:91px; z-index:2">
<img src="imgSrc" alt="ImÁgenes de la galeria" name="imgSrc" width="331" height="257" id="imgSrc" onclick="popImage(this.src,'Texto alt') " />
</div>
<div id="Layer1" style="position:absolute; left:15px; top:359px; width:381px; height:38px; z-index:3">
<table width="400" border="1" cellspacing="0" cellpadding="0" style="background:#666; width:400px; margin: auto;">
<tr>
<td align="center"><a href="#" onclick="anterior();"> < Anterior</a></td>
<td align="center"><a href="#" onclick="siguiente();">Siguiente > </a></td>
</tr>
</table>
</div>
</body>
</html>
El error fue the todoexpertos, que me separó el codigo en multiple línea, puedes fijarte aquí, http://marcelo.origoni.com.ar/prueba.htm el ejmplo funcionando, claro que con imagenes mías XD.
 Y puedes copiar el codigo, viendo el fuente (solo necesitas reemplazar la funcion popupimage en tu codigo)
Saludos
Marcelo
no puedo abrir la pgina!!!!
me podrías decir pq no me muestra la capa en este codigo???
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
</script>
<script language="Javascript">
display = (navigator.appName == "Microsoft Internet Explorer") ? "block" : "table-row" ;
function mostrar(nombreCapa){ document.getElementById(nombreCapa).style.display=display;}
function ocultar(nombreCapa){ document.getElementById(nombreCapa).style.display="none";}
</script>
</head>
<body background="../../imagenes/FondoderechaEventos.jpg" onLoad="MM_showHideLayers('Layer3','','show')">
<div id="Layer1" style="position:absolute; left:100px; top:51px; width:98px; height:149px; " align="center">
<img src="../../imagenes/mapas/MapaEventosGral.jpg" width="418" height="520" border="0" >
</div>
<div id="capa1" style="position:absolute;width:100px;height:26px;top:167px;left:247px;" onmouseout="ocultar('capa2')" onmouseover="mostrar('capa2')"></div>
<div id="capa2" style="position:absolute;width:100;height:100;top:112px;left:556px;display:none">prueba</div>
</body>
</html>
Perdón, apague el servidor (mi pc) durante la noche.
 Con respecto al otro codigo, a mi me anduvo (puedes verlo en la misma pagina, http://marcelo.origoni.com.ar/prueba.html). Lo unico que hice, fue ponerle Capa1, para saber donde estaba ;)
Saludos
MArcelo
sigo sinoder abrir lapagina.
que nvegador utilizas???
a mi con Fireox si que me funciona pero con IE 8,no
Lo he probado con ambos, y me anduvo en los 2, sin ninguna problema, no lo he probado en IE7 o 6
Entonces es problema del IE8, no?
A mi me anduvo bien en IE8
entonces donde esta el problema???
puede ser que el IE8 esté en modo compatibilidad?
y eso como lo se?
Puede fijarte en el menu herramientas, si está habilitada la opcion
hola de nuevo he probado en el IE7 y tampoco me  funciona. no se como se mira lo de la compatibilidad en el menu de herramientas. a ver si lo puedo solucionar pq este tema me esta volviendo loca.
lo estas probando en forma local? tal vez IE esté bloqueando los js "para tu seguridad"
si si lo estoy probando en local. me sale el mensaje de error de javascript pero pulso sobre el y le doy a aceptar. me sale en todas las paginas que pruebo en local que llevan algo de javascript. no creo que sea eso, pq todas las demas funciones de java me funcionan.
es que no lo entiendo!!!! pq a mi no me sale y a ti si!!!!
Te envié el archivo html que estoy usando. Lo he probado en IE6, 7 y 8, y andubo sin problema alguno.
Saludos
Marcelo
Añade un comentario a esta respuesta
Añade tu respuesta
Haz clic para o
Escribe tu mensaje
¿No es la pregunta que estabas buscando?
Puedes explorar otras preguntas del tema Javascript o hacer tu propia pregunta: