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 1: With Thumbnails On Same 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">
<!--
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 1: With Thumbnails On Same Page</title>
<link href="../demo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function showImage(imgName, imgText) {
var curImage = document.getElementById('currentImg');
var textDiv = document.getElementById('rightText');
curImage.src = imgName;
curImage.alt = imgName;
curImage.title = imgName;
textDiv.innerHTML = imgText;
}
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 1: With Thumbnails On Same Page
</h1>
<p>Click on an image thumbnail at left to see the larger image and associated text on the right. </p>
<div id="mainContainer">
<div id="leftNav">
<img src="images/jessica_biel_01_tn.jpg" alt="images/jessica_biel_01_tn.jpg" title="images/jessica_biel_01_tn.jpg" onclick="showImage('images/jessica_biel_01.jpg', 'Every time you click an image, the text in this box will change.');" />
<br />
<img src="images/jessica_biel_02_tn.jpg" alt="images/jessica_biel_02_tn.jpg" title="images/jessica_biel_02_tn.jpg" onclick="showImage('images/jessica_biel_02.jpg', 'If you use quotes in your text, it\'s important to escape them with a backslash.');" />
<br />
<img src="images/jessica_biel_03_tn.jpg" alt="images/jessica_biel_03_tn.jpg" title="images/jessica_biel_03_tn.jpg" onclick="showImage('images/jessica_biel_03.jpg', 'If you are going to use double-quotes in your text, you need to use the HTML entity &amp;quot;, or your script will &quot;error out&quot;.');" />
<br />
<img src="images/jessica_biel_04_tn.jpg" alt="images/jessica_biel_04_tn.jpg" title="images/jessica_biel_04_tn.jpg" onclick="showImage('images/jessica_biel_04.jpg', '<strong>You can include any HTML tag in your text comments, including the STRONG tag</strong>');" />
<br />
<img src="images/jessica_biel_05_tn.jpg" alt="images/jessica_biel_05_tn.jpg" title="images/jessica_biel_05_tn.jpg" onclick="showImage('images/jessica_biel_05.jpg', 'You can even add<br />line breaks by adding in simple &lt;br /&gt; tags.');" />
<br />
<img src="images/jessica_biel_06_tn.jpg" alt="images/jessica_biel_06_tn.jpg" title="images/jessica_biel_06_tn.jpg" onclick="showImage('images/jessica_biel_06.jpg', 'There is no practical limit to the size of the comments you want to add, but it\'s best to keep the text fairly short.');" />
<br />
<img src="images/jessica_biel_07_tn.jpg" alt="images/jessica_biel_07_tn.jpg" title="images/jessica_biel_07_tn.jpg" onclick="showImage('images/jessica_biel_07.jpg', 'In fact, it makes a lot of sense to use entities for everything you include in the call to the showImage function\'s imgText argument.');" />
<br />
<img src="images/jessica_biel_08_tn.jpg" alt="images/jessica_biel_08_tn.jpg" title="images/jessica_biel_08_tn.jpg" onclick="showImage('images/jessica_biel_08.jpg', 'Anyway, Jessica Biel is a pretty good comedic actress.');" />
<br />
<img src="images/jessica_biel_09_tn.jpg" alt="images/jessica_biel_09_tn.jpg" title="images/jessica_biel_09_tn.jpg" onclick="showImage('images/jessica_biel_09.jpg', 'Check out some of her movies.');" />
</div>
<div id="rightDisplay">
<img src="images/jessica_biel_09.jpg" alt="images/jessica_biel_09.jpg" id="currentImg" title="images/jessica_biel_09.jpg" />
</div>
<div id="rightText">
This is where the text associated with each image will appear.
</div>
</div>
<div id="footerArea">
<p><a href="iframe.html">Example 2: With Thumbnails In An IFrame</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.