[thelist] Pop up images

Mark Groen evolt at markgroen.com
Mon Mar 27 09:05:06 CST 2006


On Mon, 2006-03-27 at 21:31 +1000, Justin Zachan wrote:

> I am pulling together a website with a bunch of images... each image has a
> thumbnail, and the thumbnails are listed on an html page and I want to pop
> up each larger image in a small window if the user clicks on the thumbnail.
>  
> Since there are 100s of images, I was after a simple php method of having
> just one php page for the larger images i.e. large_image.php and this page
> would be populated with the correct image based on which thumbnail was
> selected.
> 
> So not sure how to do it (I know very basic php), but I guess passing some
> variable once the thumbnail is clicked, and the large_image.php calls the
> correct image file...

Here's a nice simple idea, since we are depending on javascript to be
available for the popup you can use variable in that code so you only
need one popup.htm page and one popup script instead of hundreds.

For xhtml compatibility I put the javascript external:
<script type="text/javascript" src="popup.js"></script>

the javascript:

function popup(vUrl,vTarget,w,h)
    {
      n = open
			(vUrl,vTarget,'width=' + w + ',height=' + h +
',directories=no,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,resizable=yes,screenx=150,screeny=150');
    }

and you call it in your html page so:

<a href="images/popup.htm?ColleenONiel-l.jpg" onclick="popup(this.href,
this.target,600,450); return false;">

The single popup.htm page then is this:

<html><head><title>popups!</title>
<style>
body{margin:auto; text-align:center;}
img {border:none;}
</style></head>
<body onblur="window.close()">
<p style="text-align:center;margin:auto;">click outside this window to
close<br />

<script type="text/javascript">
if (location.search.length > 0);
img = unescape(location.search.substring(1));
//alert(dataPassed);
document.write("<img src="+img+">")
</script></p>
</body></html>

-- 
cheers,

        Mark




More information about the thelist mailing list