Modifying Pop Up Image Viewer

Pennimus

07-12-2005, 11:46 PM

Hi All,

I'm using (what I assume is) a fairly straight forward .js pop up image viewer. The code -

Code:

<script type="text/javascript">
function popImg(imageURL) {
var imgWin = window.open('about:blank','imgWin','width=220, height=160, left=200, top=200');

with (imgWin.document) {
writeln('<html><head><title>Loading...</title>');
writeln('<style type="text/css"></style></head>');
writeln('<body onload="self.focus();"><img id="pic" style="display:none" /></body></html>');
close();
}
var img = new Image();
img.onload = function() { sizeImgWin(imgWin, img) };
img.src = imageURL;
}

function sizeImgWin(win, img) {
var new_w = img.width;
var new_h = img.height;
var old_w = win.innerWidth || win.document.body.offsetWidth;
var old_h = win.innerHeight || win.document.body.offsetHeight;
if (!new_w) { new_w = old_w; }
if (!new_h) { new_h = old_h; }
new_w -= old_w; new_h -= old_h;
win.resizeBy(new_w,new_h);
win.document.title = img.src.substring(img.src.lastIndexOf("/")+1);
var pic = win.document.getElementById('pic');
pic.src = img.src;
pic.style.display = 'block';
}
</script>

And to view the image -

Code:

<a href="[image path]" onclick="popImg(this.href); return false;">See Image</a>

As I have simply harvested this from a code site and my understanding of js is limited at best, I wondered if anybody can help me tinker with this a bit so that...

A) The pop up window has a title defined by me. Ideally this would be definable from the <a> tag so that each image window can be called something relevant to the image, but having a universal title for the pop up defined in the js would be okay too.

The current title using the above script is the complete image URL which just looks messy.

B) There is no status bar on the pop up, or failing this the status bar says something a little more interesting than 'done'.

Many thanks,
Pennimus

Jalenack

07-13-2005, 02:43 AM

Question A:

<a href="[image path]" onclick="popImg(this.href, this.getAttribute('title')); return false;" title="My Friends">See Image</a>

function popImg(imageURL, imageTitle) {
var imgWin = window.open('about:blank','imgWin','width=220, height=160, left=200, top=200');

with (imgWin.document) {
writeln('<html><head><title>'+imageTitle+'</title>');
writeln('<style type="text/css"></style></head>');
writeln('<body onload="self.focus();"><img id="pic" style="display:none" /></body></html>');
close();
}
var img = new Image();
img.onload = function() { sizeImgWin(imgWin, img) };
img.src = imageURL;
}

BTW, why didn't it just say 'Loading...' when you open the window?

For Question B, I'd imagine googling for 'window.open' would get the answer

Pennimus

07-13-2005, 12:32 PM

Thanks for the help Jalenack, but that doesn't seem to have worked. Let me go into a little more detail about what happens.

In IE, your code seems to work very briefly before the title reverts to just the image name (including .gif).

In firefox, I don't see your code working at all and the title is the entire image path (although I would guess the code does work but Firefox is working through the script too fast so I don't actually see the proper title).

Could this be anything to do with this line in the code? -

win.document.title = img.src.substring(img.src.lastIndexOf("/")+1);

Regarding your question about 'loading' - its the same deal as above, it shows briefly before changing to the path/image name.

I'll see what I can find regarding status bars.

Thanks
Pennimus

vwphillips

07-13-2005, 03:48 PM

see
http://www.vicsjavascripts.org.uk/ImagePopUp/ImagePopUp.htm