Mostrar imagen grande en galeria de imagenes

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 respuesta

Respuesta
1
¿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
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.
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)
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 ;)
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.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Bloquear imagenes

Como hago para bloquear una imagen de mi pagina pra q no puedaser utilizada
1 respuesta

La pagina web no se me ve bien..

Quiero preguntarte por que razón una pagina web que tengo de desarrollada en Dreamweaver CS5 no se me ve bien cuando la deseo visualizar en internet explorer o en Mozilla firefox, en algunas paginas me dicen el algunos sitios web que debo de poner,...
1 respuesta

Clásico juego de memoria con javascript

Estoy usando un código que encontré en la red para un juego de memoria (el clásico juego de destapar imágenes de dos en dos y tratar de hacer las parejas). Podés verlo en funcionamiento en: http://www.tunait.com/javascript/scripts/juegos/memoria.htm...
1 respuesta

¿Como insertar un script correctamente?

Quisiera saber como inserto un script o javascript en mi web llevo algun timpo intentando poner scripts en mi web y al momento de ponerlos no sale nada me podrias decir donde se ponen y si llevan otra cosa extra para que funcionen
1 respuesta

Cambiar un link a estado de visitado con javascript

No se si me lo vais a poder resolver el problema que tengo. En mi página tengo varios link que cuando los pulsa abren una ventana con tamaño determinado. Y esto lo echo a través de javascript. A causa de esto no consigo que ese link cambie al estado...
1 respuesta

Ayuda en pascal para hacer pila

Mi problema trata de hacer una pila la cual deberá de ser de un limite máximo de 10 espacios en los cuales se podrán depositar algunas cifras, las cifras se integraran de abajo hacia arriba. Todo esto debe de llevar un menu en el cual debe de...
1 respuesta

¿Alguien me podría ayudar con pascal?

Tengo un problema con un ejercicio de pascal, no lo entiendo y no se como sacar lo que me pide. Desearía un poco de ayuda por parte de los expertos, en fin el ejercicio dice así: ""Diseñar un algoritmo que lea un arreglo bidimensional de datos...
1 respuesta

About Blank

Hago un link en un html para que se me abra en una nueva página (blank), pero quiero que ésta cuando aparezca tenga un tamaño concreto y no se vea la barra de menú, ¿Cómo lo podría hacer? No se si me he explicado muy bien, si es así me lo comentas y...
1 respuesta

Como Redireccionar a url leída en un campo de mysql

Agradecería vuestra ayuda porque me he quedado para en este punto. Tengo una base de datos con los campos usuario, password y url ( cada usuario tiene su propia url) Tengo una web con un formulario de acceso y al validar los datos (usuario, password)...
1 respuesta

Ventanas flotantes

Estoy interesado en la manera de hacer ventanas flotantes para mostrar información adicional como imagenes o texto, pero necesito saber como se maneja y como se coloca las coordenadas para ubicar a dicha ventana flotante.
1 respuesta