Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Showing A Larger Image OnClick With JavaScript / DOM Example 2: With IFramed Thumbnails
<!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">
<!--
Showing A Larger Image From A Thumbnail OnClick Via JavaScript / DOM Revisited
Copyright 2008 Doug Vanderweide, dba Rescue-ME
http://www.dougv.com
Distributed under the Creative Commons Attribution / Share-Alike 2.5 License
http://creativecommons.org/licenses/by-sa/3.0/us/
Any distribution or derivative work based on this script must include the
original source code from this work, and must retain this copyright
notice block intact.
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Showing A Larger Image OnClick With JavaScript / DOM Example 2: With IFramed Thumbnails</title>
<link href="../demo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function preLoadImages() {
var tmp = new Array();
for(var i = 0; i < attributes.length; i++) {
tmp[i] = new Image();
tmp[i].src = attributes[i];
}
}
</script>
<style type="text/css">
#mainContainer, #footerArea {
width: 660px;
margin-bottom: 30px;
}
#footerArea {
clear: both;
}
#leftNav {
float: left;
}
#rightDisplay, #rightText {
float: right;
width: 500px;
margin: 0;
text-align: center;
}
#rightText {
margin-bottom: 30px;
}
img {
margin: 10px 0 10px 0;
}
</style>
</head>
<body onload="preLoadImages('images/jessica_biel_01.jpg', 'images/jessica_biel_02.jpg', 'images/jessica_biel_03.jpg', 'images/jessica_biel_04.jpg', 'images/jessica_biel_05.jpg', 'images/jessica_biel_06.jpg', 'images/jessica_biel_07.jpg', 'images/jessica_biel_08.jpg');">
<h1>
Showing A Larger Image OnClick With JavaScript / DOM Revisited<br />
Example 2: With IFramed Thumbnails
</h1>
<p>Click on an image thumbnail at left to see the larger image on the right. </p>
<div id="mainContainer">
<div id="leftNav">
<iframe src="thumbs.html" height="630" width="150" frameborder="0" marginheight="0" marginwidth="0"></iframe>
</div>
<div id="rightDisplay">
<img id="currentImg" src="images/jessica_biel_09.jpg" alt="images/jessica_biel_09.jpg" title="images/jessica_biel_09.jpg" />
</div>
<div id="rightText">
This is where the text associated with each image will appear.
</div>
</div>
<br />
<div id="footerArea">
<p><a href="index.html">Example 1: With Thumbnails On Same Page</a></p>
<p><a href="http://www.dougv.com/blog/2008/01/28/showing-a-larger-image-from-a-thumbnail-onclick-via-javascript-dom-revisited/">Showing A Larger Image From A Thumbnail OnClick Via JavaScript / DOM Revisited</a></p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.