Ayuda con document.xxx.scr

NiB · #1 (**permalink**) 11/01/2009, 17:37

Hola de nuevo,

Estoy modificando un script en el que la función, tras pulsar en cada uno de los "thumbnail", cambia la imagen del src="manimage", y la modificación que quiero hacer es que la imagen resultante llame a otro javascript (javascript:popImage) que me la muestra en un popup ampliada, no consigo pasar una variable al path del href (___VARIABLE____), aunque tal vez exista alguna función que similar a "document.mainimage.src" cambie en este caso el path del href.

El código resumido:

Código PHP:

 
<script>
function changeImage(filename)
{
    document.mainimage.src = filename;
}
</script>



<?
$directorio=dir($path);
$i=0;
while ($archivo = $directorio->read()){
    if ($archivo != "." && $archivo != "..") {
    $i++;
    ?>
    <a href="javascript:changeImage('<?php echo "$path/img_$i.jpg";?>')"><img src="<?php echo "$path/img_$i.jpg";?>" width="50" height="50"></a>
    <?
    } 
}
$directorio->close();
?> 



<a href="javascript:popImage('<?php echo $path?>/___VARIABLE____')">
<img src="<?php echo $path?>/img_1.jpg"  name="mainimage" width="175" border="0">
</a>

Espero haberme explicado bien (me ha costado ordenar mi mente para aclararlo)

gracias de antemano

un saludo

caricatos · #2 (**permalink**) 11/01/2009, 23:13

Hola:

Deberías evitar poner código que no sea javascript en este foro (creo que entiendo tu php pero en este foro no todos sabemos algunos lenguajes distintos de javascript...

En tu función quieres usar un enlace para abrir un popup, pero en vez de un tag "a", puedes usar el propio tag img, y su evento click (y si quieres mostrar la mano, puedes hacerlo con estilos)... entonces puedes usar el propio atributo src de la imagen... y si el src es otro puedes asignarlo al atributo title de la imagen (por ejemplo) y en la imagen poner algo así: onclick="window.open(this.title)"...

Saludos

NiB · #3 (**permalink**) 12/01/2009, 13:31

Gracias por contestar caricatos,

No hay manera, he probado con onclick de varias maneras y me fallaba el cambio de imágenes, he probado a insertar otros códigos en la función, he vuelto con href y lo mismo, probando a insertar mas codigo en la funcion para obtener la variable..., vamos, que ni idea, lo mas cerca de la solución me abre el popup pero siempre de la imagen inicial, he limpiado el código de php para que se entienda mejor y he subido el html para que se vea el ejemplo, la idea como decía, es abrir la imagen grande para ampliarla en el popup.

Código PHP:

  <script type="text/javascript"> 
function changeImage(url,filename){ 
document.getElementById(filename).src = url; 
} 
</script> 
 
<div align="center"> 
    <p> 
    <a href="javascript:popImage('img_1.jpg')" id="enlace"> 
    <img id="imagen" src="img_1.jpg" alt="openservice" width="175" border="0"> 
    </a> 
    </p> 
     
    <p> 
    <a href="javascript:changeImage('img_1.jpg','imagen');"><img src="img_1.jpg" alt="openservice" width="50" height="50" border="0"></a> 
    <a href="javascript:changeImage('img_2.jpg','imagen');"><img src="img_2.jpg" alt="openservice" width="50" height="50" border="0"></a> 
    <a href="javascript:changeImage('img_3.jpg','imagen');"><img src="img_3.jpg" alt="openservice" width="50" height="50" border="0"></a> 
    </p> 
</div>

Os pongo también el script para abrir la ventana, aunque no creo que tenga nada que ver:

Código PHP:

  <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='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY; 
var optIE='scrollbars=no,width=150,height=100,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=100-(document.body.clientWidth-document.images[0].width);'); 
writeln('height=100-(document.body.clientHeight-document.images[0].height);'); 
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>

gracias de nuevo

caricatos · #4 (**permalink**) 12/01/2009, 16:07

Hola:

La verdad es que tengo que hacerte una crítica que espero que te sirva en el futuro, pero voy a empezar poniéndo un código que tendría que funcionar:

<img id="imagen" src="img_1.jpg" alt="openservice" width="175" border="0"
onclick="popImage(this.src)" style="cursor:pointer" >

Tal como lo tienes, sin el enlace (tag a) tienes que conseguir el popup, pero sobre la crítica... el popup tiene demasiado código, por lo que seguro que hay cosas innecesarias, y poner la imagen grande en un recuadro peque es otro gasto de recursos, para el caso que muestras creo que no importa mucho, pero ya que usas php, es relativamente fácil hacer miniaturas de las imágenes... pero bueno, eso se puede dejar para otra ocasión.

Saludos

NiB · #5 (**permalink**) 15/01/2009, 07:03

Vaya, juraría haber probado con src, aunque con tal lío ya no recuerdo si fue antes de aprender, mientras buscaba info, que no es correcto poner javascript:popImage(this.src) ...

Mil gracias, por supuesto que funciona.

El popup si que tiene mucho código, al menos a mi me lo parece, pero otros que probé no acababan de funcionar bien en ie6 y tal como habrás podido deducir, mis conocimientos de javascript dejan mucho que desear así que en cuanto funcionó, no toqué nada más.
El upload de imágenes están controlado por tamaño y no superarán los 60kb cada una, y como mucho serán 15 imágenes (3 x 5 secciones) así que no consumirán mucho.

gracias de nuevo