Image-sized popup

[Rocko]

Hi peeps!

I want to be able to do this:

Have some thumbnails that when clicked, pops up the full-sized image.

The thing is this: Each image will be a different size.
I want the pop-up window to have the dimension of each full size image with no padding, etc...
So what's the best solution to this in javascript?

Thanks.

// -->rocko

[Skunk]

Try this:

<script>
function imageClicked(img) {
 height = img.height;
  width = img.width;
  src = img.src;
window.open(src,"img_window","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width="+width+",height="+height)
}
</script>

<img src="image.gif" onClick="imageClicked(this)">
<img src="anotherimage.gif" onClick="imageClicked(this)">

That function should open a new window containing the image set to the width and height of the image. You may need to tweak it a bit but the basic concept is there.

[Andrew-J2000]

this will not work properly, as it will get the image size of the minimised image, so

what you should do is preload the larger images as well and for each one use the script above to store the values in a array
http://www.webmasterbase.com/article/625/72

i did have something similar, but i wont be able to find it right now.

basically you can do some validation if the image exists or fails via

if (img.width <= 200 || img.height <= 100 || img.complete() != true)
{
//.. do this popup instead
}

[Rocko]

Thanks for the reply.

ALl that did was popup the thumbnail itself

The full-size image is has to be different than the thumbnail

Thanks again, sorry for the mess-up.

// -->rocko

[Andrew-J2000]

function imageClicked(img) {
 height = img.height;
 width  = img.width;
 if (height == undefined || width == undefined) alert('no value');
 tools  = 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=' + width + ',height='+height;
window.open(img,'img_window',tools)
} 

reason it wont get the width is because its a null value as img.height does nothing more or less.

[Fly Swatter]

http://www.webpagegadgets.com/imgpop/