Forum Moderators: coopster
I echo a certain amount of images , these images are thumbnails. I want to be able to show the real enlarged image next to the thumbnail without having to reload the page. So what i'm thinking of is something like the onclick function in JS. I tried some stuff but still can't make it work.
( my whole aim is not to reload page or open a new one )
my code is something like this
for (i=0; i<count($test); i++){
echo "<a href=\"...."><img src=\"$test[$i]\"></a>";
}
tried putting a javascript function in there but wasn't successful.
i basically need to pass just $i to another function and that function onclick() will produce the image.
Hope this makes sense
thanks
for example onclick ( call some funtion )
you could pop them up in a new window for the full size image. Just put the javascript call in the for loop and the js function in the head. A standard window.open with width and height, then you can just pass it the pic name.
But i don't want to pop them up in a new window, i want everything on one page.
You can do it with DHTML. "float" some dynamic layers over the page, one with each large image, with the visibility turned off. Then use your thumbnails and javascript to turn the visibility on and aff as desired.
You can also do it with javascript and regular embedded images. Make an empty panel by placing a big empty image on your page with an ID and NAME. Then replace the image by altering the "src" attribute in the DOM.
You can also do it fairly easily with an iframe. Make an iframe where you want the large image to go, and load the large image into it with
<a HREF='myimage.gif' TARGET='myiframe'>The method you choose depends on the kind of placement and effect you prefer, and your familiarity/comfort with client-side browser programming. From your responses to the good advice offered above, it seems like an iframe is the solution you'd be most comfortable with.
I sense your reluctance to do it with a popup window, even though it is usually the best way to do what you're asking. Maybe you are concerned about the popup blockers which are becoming so common on the web.
My favourite method of showing a detailed image is the "self-destructing" popup window. I open a chromeless window (all the borders and bars turned off), sized to fit my image exactly. In the <body> tag of the new window, I put the events:
onClick='self.close();' onBlur='self.close()'This closes the popup window when someone clicks anywhere - on (onClick) or off (onBlur) the popup window. My user testing has shown that users are comfortable with how the popup behaves, and understand intuitively how to make it appear & disappear, even though it doesn't have the persistence of a normal popup window.
Good luck!
