pop-up images
http://www.hampton-homes.net/communities/hampton_place.php
I've got all these images that you can click to get a bigger image pop-up. It was suggested in the critique area to possibly add a "close" link/button below the image to allow an alternate method for closing the pop-up window. Right now it directly links to open up an image file, not an actual html page. How can I do this? Is there any way to add that feature simply in the link coding? In other words, without having to create lots of separate html pages to display each individual image along with the code?
taff posted this at 17:20 — 17th July 2003.
They have: 956 posts
Joined: Jun 2001
aha. That was my suggestion and I didn't realize that you were simply linking directly to the jpg files. I always link to html pages containing the graphic so I'm not sure if you've got an alternative here.
.....
Suzanne posted this at 18:32 — 17th July 2003.
She has: 5,507 posts
Joined: Feb 2000
Use JavaScript to generate the whole page. You wouldn't do this in the link coding, you'd do it in the function itself.
ROB posted this at 20:26 — 17th July 2003.
They have: 447 posts
Joined: Oct 1999
Heres a quick example of how you can do it:
Create a small transparent gif named 'blank.gif' and an html document titled 'popup.html', something like this:
<html><head><title></title></head>
<body onload="window.opener.loadpopupimage(window)"><div align="center">
<a href="javascript:window.close();">Close Window</a><br />
<img id="popupimage" src="blank.gif">
</div></body></html>
You can put any layout you want to layout the large images in there, but the above elements must be there.
Now you can popup your large images like so:
<script language="javascript" type="text/javascript">
var curpopupsrc = '';
function showimage(that) {
curpopupsrc = that.href;
window.open('popup.html', 'popupwindow', 'width=750,height=550');
return false;
}
function loadpopupimage(win) {
win.document.getElementById('popupimage').src = curpopupsrc;
win.document.title = curpopupsrc;
}
</script>
<a href="http://www.hampton-homes.net/communities/hampton_big.jpg" onclick="return showimage(this);"><img src="http://www.hampton-homes.net/communities/hampton_small.jpg"></a>
fifeclub posted this at 22:00 — 17th July 2003.
He has: 688 posts
Joined: Feb 2001
I'll honostly tell you that you lost me on that coding
, but I will definitely give that a try. Thanks.
taff posted this at 22:09 — 17th July 2003.
They have: 956 posts
Joined: Jun 2001
Wow, that works nicely actually. Thanks Rob! I'm about to start on a photography site and that little block of code will save a pile of time.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.