March 31st, 2006
DHTML Image Thumbnail Chooser
This function allows you to easily browse through a series of thumbnails. When you click on a thumbnail, the full-size image is displayed on the right. The currently selected thumbnail becomes highlighted. The DHTML changes the source of an image tag, by taking out the '_tn' of the thumbnail filename. You can use this for your images, just create smaller images with the same filename as the larger image, except with '_tn' before the file extension.
<style>
body {
background-color:#000000;
color:#E27907;
font-family:Verdana,Arial;
font-size:10pt;
letter-spacing:2;
}
.thumbNormal {
border:4px solid #000000;
cursor: pointer;
}
.thumbSelected {
border:4px solid #ff0000;
}
</style>
body {
background-color:#000000;
color:#E27907;
font-family:Verdana,Arial;
font-size:10pt;
letter-spacing:2;
}
.thumbNormal {
border:4px solid #000000;
cursor: pointer;
}
.thumbSelected {
border:4px solid #ff0000;
}
</style>
Here's the JavaScript that dynamically changes the image source by using a regular expression.
<script language="JavaScript" type="text/javascript">
var lastID = 0;
function SelectImg(id) {
if (lastID > 0)
document.getElementById(lastID).className = "thumbNormal";
document.getElementById(id).className = "thumbSelected";
regex = /_tn/;
document.getElementById(0).src = document.getElementById(id).src.replace(regex, ");
lastID = id;
}
function LoadTrigger() {
SelectImg(1);
}
window.onload = LoadTrigger;
</script>
var lastID = 0;
function SelectImg(id) {
if (lastID > 0)
document.getElementById(lastID).className = "thumbNormal";
document.getElementById(id).className = "thumbSelected";
regex = /_tn/;
document.getElementById(0).src = document.getElementById(id).src.replace(regex, ");
lastID = id;
}
function LoadTrigger() {
SelectImg(1);
}
window.onload = LoadTrigger;
</script>
And here's where you'll put in your own images
Click a photo on the left to view full image.
<table border="0">
<tr>
<td valign="top"><img id="1" class="thumbNormal" src="/images/family_tn.jpg" width="100" height="50" onclick="SelectImg(1)" /> <br />
<img id="2" class="thumbNormal" src="/images/ourdog_tn.jpg" width="100" height="50" onclick="SelectImg(2)" /> <br />
<img id="3" class="thumbNormal" src="/images/fish_tn.jpg" width="100" height="50" onclick="SelectImg(3)" /></td>
<td width="15"></td>
<td valign="top"><img id="0" src="" /></td>
</tr>
</table>
<table border="0">
<tr>
<td valign="top"><img id="1" class="thumbNormal" src="/images/family_tn.jpg" width="100" height="50" onclick="SelectImg(1)" /> <br />
<img id="2" class="thumbNormal" src="/images/ourdog_tn.jpg" width="100" height="50" onclick="SelectImg(2)" /> <br />
<img id="3" class="thumbNormal" src="/images/fish_tn.jpg" width="100" height="50" onclick="SelectImg(3)" /></td>
<td width="15"></td>
<td valign="top"><img id="0" src="" /></td>
</tr>
</table>
Digg this
post to del.icio.us
on July 15th, 2007 at 1:30 pm
Hi, Your code is great - Thank you. Do you know if it is possible to add a URL to the full-size image once displayed. The URL would need to be different for each image. Hope to hear from you soon, Many Thanks, Lianne.
on July 16th, 2007 at 7:36 am
You'd have to wrap the image in a hyperlink, and then modify the URL when you modify the .src of the image