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:

Code:

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

Code:

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

Code:

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

Code:

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

Thread: Thumbnail image chooser - please help!!!

Thread Tools

Search Thread

Thumbnail image chooser - please help!!!

Bookmarks

Bookmarks

Posting Permissions