visor de fotos overlay innerthtml duda

vani18 · #1 (**permalink**) 25/03/2012, 13:35

hola como va, miren estaba buscando un visor de fotos, sin nada del otro mundo -jquery por el momento no.-

encontre este. pero no logro que me aparezca la imagen en la capa que aparece , intente varias cosas... el tema creo que esta en las lineas 44 y 46

o por ahi es en otro lado...

lapagina.html

Código PHP:

  <html>
<head>
<style type="text/css">
#overlay {
visibility:hidden;
display:none;
position:absolute;
top:0px;
left: 0px;
z-index: 9;
width: 100%;
height: 100%;
background-color: #000000;
opacity:0.65;
}
#media {
visibility:hidden;
position:absolute;
display:none;
left: 30%;
top:65px;
z-index: 10;
width: 450px;
height: 300px;
background-color: #fff;
border:1px solid #454545;
}
*:first-child+html body #overlay {
filter: alpha(opacity=65);
} * html #overlay {
filter: alpha(opacity=65);
}
</style>
<script language="javascript">
function open_overlay(mediatype, url) {
document.getElementById("overlay").style.display="block";
document.getElementById("media").style.display="block";
document.getElementById("overlay").style.visibility="visible";
document.getElementById("media").style.visibility="visible";
var _docHeight = document.body.offsetHeight;
document.getElementById("overlay").style.height=_docHeight;


//var cadena='con esto se puede ver texto...pero no puedo mandarle fotos...';

var cadena="'<img'+'src=trucho.jpg'+'>'";

document.getElementById("media").innerHTML=cadena;
}
function close_overlay() {
document.getElementById("overlay").style.visibility="hidden";
document.getElementById("media").style.visibility="hidden";
}
</script>
</head>
<body style="height:100%;margin:0;padding:0">
<a href="#" onClick="open_overlay();">Imagen o texto sobre la que hacer click para abrir la capa.</a>
<div id="overlay" onClick="close_overlay()">
</div>
<div id="media">
</div>
</body>
</html>

saludos..

pistonasos · #2 (**permalink**) 25/03/2012, 18:15

hola vani18, para estos casos, te recomiendo que te fijes como quedò el fuente de tu pàgina para ver si tu script hizo lo correcto.
lo digo porque estoy casi seguro que en tu documento quedò algo asì:

Código:

....
 <div id="media">'<img'+'src=trucho.jpg'+'>'</div>
...

Igualmente me parece muy rara tu variable cadena...
¿No querràs hacer algo asì?:

Código:

src="'trucho.jpg'"
cadena="<img src="+src+"/>"

Que serìa lo mismo que:

Código:

cadena="<img src='trucho.jpg' />"

Al menos que lo hallas pensado para que cuando quieras cambiar la variable src cambie el src de la imagen. cosa que no pasarìa ya que actualizarìas el valor de la variable src pero la variable cadena ni se entera que esto pasò, ya que tambièn habrìa que actualizarla.

Otra cosa: Una buena costumbre en HTML es que las tags que no tienen otra tag de cierre se cierren, por ej:

Código:

<input type="text" >    //Buena costumbre
<input type="text" />  //Mala Costumbre

Saludos.

vani18 · #3 (**permalink**) 25/03/2012, 23:13

Cita:

Iniciado por pistonasos

Al menos que lo hallas pensado para que cuando quieras cambiar la variable src cambie el src de la imagen. cosa que no pasarìa ya que actualizarìas el valor de la variable src pero la variable cadena ni se entera que esto pasò, ya que tambièn habrìa que actualizarla.

ah si lo pude hacer de que sea dinamico el src, por medio de php. lo que si tengo que tener el codigo js en la misma pagina por que si no, se complicaba enviar una variable php por funcion....

no se si me falta algo...

por que la variable php se ira modificando cuando haga onmouseover.... mediante mysql_query sabre los nombre ...

o algo ,,,pero lo mas "complicado salio" o si no le encontrare una vuelta...

o le mandare ajax... por que tengo q saber el nombre de la foto.. pero eso lo hago despues.

gracias