Thumbnail Viewer II extension

**japo** · 12-11-2006, 11:11 AM

Thumbnail Viewer II

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

I'm using Thumbnail Viewer II with great pleasure, but now I want to extend it a little. I want the large images, called on by the thumbnails/text links, also to be clickable so the next image will appear in de target div.
I've tried to insert the onClick="modifyimage('foto', 0) code into the head section but I can't get it working.
So what I want: When you click on the large image, the next one will appear, and the thumbnails need to keep their function.

I hope someone can help me with this!

Thanks

**jscheuer1** · 12-11-2006, 12:45 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for link to next image):
var dynimages=new Array()
dynimages[0]=["photo1.jpg", ""]
dynimages[1]=["photo2.jpg", ""]
dynimages[2]=["photo3.jpg", ""]

//Preload images ("yes" or "no"):
var preloadimg="no"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(imgindex, loadarea){
var theimg=dynimages[imgindex]
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
else
imghtml='<a href="#" onclick="return modifyimage(\''+loadarea+'\', '+(imgindex<dynimages.length-1? imgindex+1 : 0)+')">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(imgindex, loadarea)
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

</script>
</head>
<body>
<a href="#" onMouseover="modifyimage('dynloadarea', 0)"><img src="photo1_thumb.jpg" border="0"></a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)">image 2 (onmouseover)</a><br>
<a href="#" onClick="return modifyimage('dynloadarea', 2)">image 3 (onclick)</a><p>

<div id="dynloadarea" style="width:140px;height:225px"></div>

</body>
</html>

**japo** · 12-11-2006, 01:15 PM

Thanks, that works fine right now. But there's one more question I want to ask.
Is it possible to give the active link, right now I use text links, a different appearance (for example another color). I usually use CSS for that matter, but in this case that doesn't seem sufficient. I tried a:active, but that only works shortly when I call on the images via the text links.
My day couldn't get any better if someone can help me with this!

**jscheuer1** · 12-11-2006, 05:37 PM

It's not completely clear what you are asking for. The active link is the one that is in process. I think that what you want is for the link that activates a given larger image to be somehow highlighted while that image is displayed. There are several approaches to this possible. Using what this script already has in its numbered array entries, I would give each link a class name and a unique id based on that number:

Code:

<a id="tv0" class="tvlink" href="#" onMouseover="modifyimage('dynloadarea', 0)"><img src="photo1_thumb.jpg" border="0"></a><br>
<a id="tv1" class="tvlink" href="#" onMouseover="modifyimage('dynloadarea', 1)">image 2 (onmouseover)</a><br>
<a id="tv2" class="tvlink" href="#" onClick="return modifyimage('dynloadarea', 2)">image 3 (onclick)</a>

Then add code to the modifyimage function to take advantage of this:

Code:

function modifyimage(loadarea, imgindex){
if (document.getElementById){
for (var i_tem = 0; i_tem < dynimages.length; i_tem++)
document.getElementById('tv'+i_tem).className='tvlink';
document.getElementById('tv'+imgindex).className='tvlink_active';
var imgobj=document.getElementById(loadarea)
if (imgobj.fil . . .

And use css style in the head of the page to direct how this plays out:

Code:

<style type="text/css">
.tvlink {
color:blue;
}
.tvlink_active {
color:red;
}
</style>

Notes: If the page also has pseudo classes (:link, :visited, :hover, :active) defined for other links on the page and these selectors could be taken to include the links for the viewer and the properties of these pseudo classes are not wanted for the viewer links, these same pseudo classes need to be defined for the class selectors we've just created as well. This is because, in IE at least, generic link pseudo classes will be used by class selected links, unless the pseudo classes are also defined specifically for the class selected links. If you do not use pseudo classes for other links on your page, this is not a concern. Also, it would be a good idea to add to your viewer links that use onmouseover this event:

Code:

<a id="tv0" class="tvlink" href="#" onclick="return false;" onMouseover="modif . . .

To prevent them from firing (if clicked) and reloading the page and/or becoming ':visited'.

**japo** · 12-12-2006, 11:07 AM

Well that was exactly what I wanted, thanks, but in the meantime another issue has come up.
Is it possible to show a different description with every photo in another div, or if necessary iframe?
So if the visitor clicks on a digit or on the photo the description changes?
I know I'm asking much, well I think I do, but it would make me so happy if you can help me out again.

**jscheuer1** · 12-12-2006, 02:47 PM

This can also be done several ways. I would suggest expanding the array's items to include the descriptions:

Code:

var dynimages=new Array()
dynimages[0]=["photo1.jpg", "", "I'm a description"]
dynimages[1]=["photo2.jpg", "", "description too"]
dynimages[2]=["photo3.jpg", "", "third description"]

Then change modifyimage to use these (previous additions included here, new ones red):

Code:

function modifyimage(loadarea, imgindex){
if (document.getElementById){
document.getElementById(loadarea+'cap').innerHTML=dynimages[imgindex][2]? dynimages[imgindex][2] : '';
for (var i_tem = 0; i_tem < dynimages.length; i_tem++)
document.getElementById('tv'+i_tem).className='tvlink';
document.getElementById('tv'+imgindex).className='tvlink_active';
var imgobj=document.getElementById(loadarea)
if (imgobj.fil . . .

Now this gets just a little tricky. The larger images are appearing in an element with the id of 'loadarea' which is set in the calls, ex:

Code:

onMouseover="modifyimage('dynloadarea', 0)"

With that call, 'loadarea' becomes the id dynloadarea. The changes to the script will make it also look for another element with (in this case) the id of dynloadareacap. So you need to put one (and only one) on your page where you want the descriptions to appear:

Code:

<div id="dynloadarea" style="width:140px;height:225px"></div>
<div id="dynloadareacap" style="width:140px;height:30px;text-align:center;"></div>

Thread: Thumbnail Viewer II extension

Thread Tools

Search Thread

Thumbnail Viewer II extension

Bookmarks

Bookmarks

Posting Permissions