Thumbnail image chooser - please help!!! [Archive]

View Full Version : Thumbnail image chooser - please help!!!

ljh80

07-15-2007, 07:35 PM

Hi, I'm trying to set up an image viewer to browse through a series of thumbnails. When you click on a thumbnail, the full-size image is displayed on the right. The code below works, however I want to add a URL link to the large image on the right. The links will be different for each image. Does anyone know how I can do this? I'd really appreciate your help. Thanks!

If it is easier to see the code working please go to www.thestorkonline.com/announcements
Cheers!

The Style
<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>

The JavaScript...

<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>

The HTML...

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>

Trinithis

07-16-2007, 08:36 PM

Try something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
</head>

<body>
<div>
<script type="text/javascript">

function viewThumb(thumb) {
var full = document.getElementById("full");
if(!full.hasChildNodes()) {
var img = document.createElement("img");
img.src = thumb.src;
img.alt = "";
var anchor = document.createElement("a");
anchor.href = "#";
anchor.appendChild(document.createTextNode(""));
full.appendChild(img);
full.appendChild(document.createElement("br"));
full.appendChild(anchor);
}
full.getElementsByTagName("img")[0].src = thumb.src.replace(/_tn/, "");
full.getElementsByTagName("a")[0].href = thumb.src;
full.getElementsByTagName("a")[0].firstChild.nodeValue = thumb.src;
}

</script>

<img src="test1_tn.bmp" alt="" onclick="viewThumb(this)" />
<img src="test2_tn.bmp" alt="" onclick="viewThumb(this)" />

<br /><br />

<div id="full"></div>

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

ljh80

07-17-2007, 09:06 AM

Thanks. That works great, but is it possible to make the link go to an external URL (which will be specific to the selected image) rather than the image itself? Hope you can help.

Trinithis

07-17-2007, 05:43 PM

function viewThumb(thumb, uri) {
[ . . . ]
full.getElementsByTagName("a")[0].href = uri;
full.getElementsByTagName("a")[0].firstChild.nodeValue = uri;
[ . . . ]
}

<img src="test1_tn.bmp" alt="" onclick="viewThumb(this, 'http://www.google.com')" />
<img src="test2_tn.bmp" alt="" onclick="viewThumb(this, 'subdir/myPag.html')" />

And if you want the anchor text to be different from the href, just add another paramater to the function. Also, if you want to add styles to the thumbs area, you could do this:

#full {
//div style
}
#full img {
//image style
}
#full a{
//anchor style
}