PDA

View Full Version : HELP: Simple XHTML Photo Album Modification



blindgenealogist
12-26-2007, 02:37 AM
I have this simple xhtml photo album script where I am able to take a thumbnail-size image link to a fixed page to view the full-size image. However, I am wondering if it is possible to take and modify this script to create some iframe on the fixed page? What I am trying to accomplish is on my main page create a link called "View Map" and on the fixed page show the iframed script that Google Maps provided to view the direction of the specific location. Here is the script for the simple photo album . . .

Single fixed page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Photo Gallery Photo Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript">
function parseQueryString(queryString) {
var queryObject = new Object();
queryString = queryString.replace(/^.*\?(.+)$/,'$1');

while ((pair = queryString.match(/([^=]+)=\'?([^\&\']*)\'?\&?/)) && pair[0].length) {
queryString = queryString.substring( pair[0].length );

if (/^\-?\d+$/.test(pair[2])) pair[2] = parseInt(pair[2]);
queryObject[pair[1]] = pair[2];
}

return queryObject;
}

</script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">
<div class="center">
<script language="javascript">
var queryObj = parseQueryString( location.search );
var alt = unescape(queryObj.alt);
document.write("<h1>" + alt + "</h1>");
document.write("<img src=\"" + queryObj.src + "\" width=\"600\" height=\"" + queryObj.height + "\" alt=\"" + alt + "\" /><br />\n");
</script>
</div>
<p class="clear">These images are for sample only - not for redistribution.</p>
</div>
</body>
</html>

Main Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Possible Photo Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">
<h1>My Photo Gallery</h1>

<div class="left">
<a href="photo.html?src=../graphics/maliwithcar.jpg&height=337&alt=Mali with Car"><img src="../graphics/maliwithcar_tn.jpg" width="100" height="100" border="0" /></a><br />
<p>Mali with Car</p>
</div>
<div class="left">
<a href="photo.html?src=../graphics/washing.jpg&height=450&alt=Wash Time"><img src="../graphics/washing_tn.jpg" width="100" height="100" /></a><br />
<p>Wash Time </p>
</div>
<div class="left">
<a href="photo.html?src=../graphics/yawning.jpg&height=450&alt=Sleepy Time"><img src="../graphics/yawning_tn.jpg" width="100" height="100" /></a><br />
<p>Sleepy?</p>
</div>

</div>
</body>
</html>

Now this is the IFRAME provided by Google Maps

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;time=&amp;date=&amp;ttype=&amp;q=445+Main,+Bayard,+NE&amp;sll=41.758764,-103.324184&amp;sspn=0.008451,0.022144&amp;ie=UTF8&amp;om=0&amp;s=AARTsJqBD8GvvXIFo9ZWiSExv-Mm4uWv8A&amp;ll=41.763117,-103.320065&amp;spn=0.022408,0.036478&amp;z=14&amp;iwloc=addr&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;time=&amp;date=&amp;ttype=&amp;q=445+Main,+Bayard,+NE&amp;sll=41.758764,-103.324184&amp;sspn=0.008451,0.022144&amp;ie=UTF8&amp;om=0&amp;ll=41.763117,-103.320065&amp;spn=0.022408,0.036478&amp;z=14&amp;iwloc=addr&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

Any help would be greatly appreciate. Matt Friend