I am trying to open a pop-up window with its own htm code, in order to show
an enlargement of a thumbnail. But I am passing a query string after the? in
the url of the new window.
HTML isn't executable code, so you can't do this in pure HTML alone.
You need some scripting somewhere, either on the server (probably
easiest), in the new window (JavaScript) or in the parent window with
the thumbnails (more JavaScript) .
Server-side code is easiest. Make a link URL like
www.helpme.com/image.php?image=newpic.jpg
image.php is a new script you write to load up the image you want.
Quite how you do this depends on what your server supports - it could
be PHP, but equally well Perl, ASP etc.
If you put the code client-side into the image viewing window, then
you need to extract the parameter from the URL, slice it up to an
image identifer, turn it into a relative URL, then write it into the
..src property of the <img> element.
BEGIN - Client-side image - viewer code
-------------------------------------------------------
<html><head>
<title>Image viewer</title>
<script language="JavaScript" type="text/javascript" >
<!-- //
window.onload = function () {
// Deal with the parameters
var strURL = document.URL;
var strQueryString = strURL.match (/\?(.+)$/);
if (strQueryString != null) {
var aryQueryStrings = strQueryString [1].split (/\&/);
var aryQueryParams = new Array();
for (var i=0; i < aryQueryStrings.length; i++) {
var strQueryParams = aryQueryStrings
.split
(/=/);
if (strQueryParams) {
aryQueryParams [strQueryParams [0]] =
strQueryParams [1];
}
}
}
// Find the properties
var strImageID = aryQueryParams ['image'];
// Force a file extension
if (!strImageID.match (/\.jpg$/i)) { strImageID += '.jpg'; }
var strBaseURL = "\/ebay\/201203\/"; // Could load this
from params too
// Might test here and exit if there's no image to load
var strSrcURL = strBaseURL + strImageID;
// Could read these from the image, take it from a parameter
or anything
var strTitle = "Image " + strImageID;
var strLongDesc = "URL " + strURL + "\nImage " + strImageID;
// Find the targets and display the properties
document.title = strTitle;
var elmImg = document.all.imgZoom;
if (elmImg) {
elmImg.src = strSrcURL;
elmImg.alt = strTitle;
elmImg.longdesc = strLongDesc;
}
var divCaption = document.all.divCaption;
if (divCaption) {
divCaption.innerText = strLongDesc;
}
}
// -->
</script>
</head><body >
<img id="imgZoom" src="" alt="" />
<p id="divCaption" class="caption" ></p>
</body></html>
-----------------------------------------------------
END - Client-side image - viewer code
Placing the code into the parent window can use either
window.open(URL) to open a window as we've already described, or it
might use window.open() and then use document.write() to generate the
HTML within it. I like this method myself, as it avoids another round
trip to the server.
var wndViewer = window.open("", "_imagegallery",
"height=500,width=500,menubar=no,resizable=yes")
var docImageView =wndViewer .document;
docImageView.write("<html><head>")
docImageView.write("<title>" + title + "</title>")
docImageView.write("</head><body>")
docImageView.write("<img src='" + src + "' />");
docImageView.write("</body></html>")
wndViewer.focus();
return true; // Success
When you call the "view large image" code from the thumbnail gallery,
I suggest using code like this:
<a href="photos/im000501.jpg" target="_imageview"
onclick="return gallery_onclick('photos/im000501.jpg', 'Ashwell
Barn',
'Reconstructing an existing modern garage in a more sympathetic
timber framed vernacular, preserving the original roof cladding to
reduce costs.');"
<img src="photos/im000501_thumbnail.jpg" alt="Ashwell Barn" /></a>
gallery_onclick() returns true if successful, which terminates
navigation at that point. However if JavaScript isn't available to
that client, then the normal <a href="" > navigation takes its place
and you get a non-JavaScript window opened .