ToddAndrae
User
Aug 29, 2003, 9:50 AM
Post #1 of 39
(22336 views)
Shortcut
|
|
Resize Window - fit to image
|
Can't Post
|
|
I haven't really looked at the one posted in the Javascript thread, but I felt like posting the one we have been using on our site for a little while now.
code placed in the head section of the page -
function imageWindow(imageURL, imageDescription){
var popImageWin = window.open('' , 'imgwin' , 'width=400, height=400, top=40, left=40, status=no, toolbar=no, menubar=no , location=no');
with(popImageWin.document){
write('<html><head><title>');
write(imageDescription);
write('</title>');
write('<style>body{margin: 0px;}</style></head>');
write('<body onLoad="self.focus();" onBlur="window.close();"><img id="pic" style="display: none" /><span style="width: 100%; text-align: center;">');
write(imageDescription);
write('</span></body></html>');
close();
}
var img = new Image();
img.onload = function() { sizeImgWin(popImageWin, 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;
new_h += 30;
win.resizeBy(new_w,new_h);
var pic = win.document.getElementById('pic');
pic.src = img.src;
pic.style.display = 'block';
}
individual links to the images -
<a href="http://www.kpdk.com/rm/listings/images/$file$" onclick="imageWindow(this.href, '$desc$'); return false;" onmouseover="window.status='$desc$'; return true" onmouseout="defaultStatus=' ';">
<img src="./images/$file$" width="150" alt="$desc$" style="display: block;" />
</a>
This will create a pop-up with the picture description as the title, it will also place the description beneath the picture and then resize the window to fit.
You can see it in action here. http://www.kpdk.com/rm/listings/l0006.html
|
. 
. 
screen.jpg
1
