Log in

View Full Version : Image Thumbnail Viewer II


bwilson
06-20-2005, 07:22 PM
Image Thumbnail Viewer II. Cannot see larger image fade across, onmouseover. Dynamic Drive Code page is: http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
Here is part of my HTML. Thank you.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
/***********************************************
* 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 no link):
<!--This is my array of images, the large ones that should fade across as they are revealed on mouseover of a smaller thumbnail picture. I don't want to link them.-->
var dynimages=new Array()
dynimages[0]=["BUSINESS_PLAZA.jpg", ""]
dynimages[1]=["BUSSTOP.jpg", ""]
dynimages[2]=["CAPSTONE.jpg", ""]
dynimages[3]=["COLONIAL_CENTER.jpg", ""]
dynimages[4]=["CREPE_GATE.jpg", ""]
dynimages[5]=["DANCE2.jpg", ""]
dynimages[6]=["DANCE.jpg", ""]
dynimages[7]=["DORM.jpg", ""]
dynimages[8]=["FALL.jpg", ""]
dynimages[9]=["GATE.jpg", ""]
dynimages[10]=["GIBBES_GREEN.jpg", ""]
dynimages[11]=["GRAD_CHILD.jpg", ""]
dynimages[12]=["INSIDE_STROM.jpg", ""]
dynimages[13]=["KOGER_CENTER.jpg", ""]
dynimages[14]=["LAW.jpg", ""]
dynimages[15]=["LECTURER.jpg", ""]
dynimages[16]=["LONGSTREET.jpg", ""]
dynimages[17]=["MCKISSICK.jpg", ""]
dynimages[18]=["MED_SCHOOL.jpg", ""]
dynimages[19]=["MELTON_DAVIS.jpg", ""]
dynimages[20]=["MORNING_SHOE.jpg", ""]
dynimages[21]=["PETTIGRU.jpg", ""]
dynimages[22]=["PIANOMAN.jpg", ""]
dynimages[23]=["PLAY1.jpg", ""]
dynimages[24]=["PORTRAIT.jpg", ""]
dynimages[25]=["PRES.jpg", ""]
dynimages[26]=["SHANNON.jpg", ""]
dynimages[27]=["SPORTS.jpg", ""]
dynimages[28]=["STROM_NIGHT.jpg", ""]
<!--ETC. More images through [35} -->
//Preload images ("yes" or "no"):
var preloadimg="yes"
//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(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
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(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}
}</script>
</head><body>
<!--Mytable with small thumbnails and the number of the larger array image.-->
table width="315" height="502" border="0"><tr>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 0)"
<img src="../images/smBUSINESS_PLAZA.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 1)">
<img src="../images/smBUSSTOP.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 2)">
<div align="center"><img src="../images/smCAPSTONE.jpg" width="36" height="48"(onmouseover)></div></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 3)">
<img src="../images/smCOLONIAL_CENTER.jpg" width="72" height="48"(onmouseover)></a></td></tr>
<tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 4)">
<img src="../images/smCREPE_GATE.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 5)">
<img src="../images/smDANCE2.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 6)">
<img src="../images/smDANCE.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 7)">
<img src="../images/smDORM.jpg" width="72" height="48"(onmouseover)></a></td>
</tr>
<tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 8)">
<img src="../images/smFALL.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 9)">
<img src="../images/smGATE.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 10)">
<img src="../images/smGIBBES_GREEN.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 11)">
<img src="../images/smGRAD_CHILD.jpg" width="72" height="48"(onmouseover)></a></td>
</tr>
<tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 12)">
<img src="../images/smINSIDE_STROM.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 13)">
<img src="../images/smKOGER_CENTER.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 14)">
<img src="../images/smLAW.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 15)">
<img src="../images/smLECTURER.jpg" width="72" height="48"(onmouseover)></a></td>
</tr>
<tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 16)">
<img src="../images/smLONGSTREET.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 17)">
<img src="../images/smMCKISSICK_TOP.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 18)">
<img src="../images/smMED%20SCHOOL.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 19)">
<img src="../images/smMELTON_DAVIS.jpg" width="72" height="48"(onmouseover)></a></td>
</tr>
<tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 20)">
<img src="../images/smMORNING_SHOE.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 21)">
<img src="../images/smPETTIGRU.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 22)">
<img src="../images/smPIANOMAN.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 23)">
<img src="../images/smPLAY1.jpg" width="72" height="48"(onmouseover)></a></td>
</tr>
<tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 24)">
<img src="../images/smPORTRAIT.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 25)">
<div align="center"> <img src="../images/smPRES.jpg" width="39" height="48"(onmouseover)></div></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 26)">
<img src="../images/smSHANNON.jpg" width="72" height="48"(onmouseover)></a></td>
<td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 27)">
<div align="center"><img src="../images/smSPORTS.jpg" width="32" height="48"(onmouseover)></div></a></td>
</tr>
<tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 28)">
<!--ETC. this has the rest of the small photos from the table-->
</tr></table></div>
<!--My div tag to display the large image on the page.--><div id="dynloadarea" style="width:320px; height:514px;"></div>
</table></body></html>
jscheuer1
06-21-2005, 05:23 AM
You don't see the larger images fade across or you don't see them at all? If you don't see them at all - this:
<!--This is my array of images, the large ones that should fade across as they are revealed on mouseover of a smaller thumbnail picture. I don't want to link them.-->is an html comment, it doesn't belong inside a script. If you have any of these inside your actual script, they will probably break it. A javascript comment looks either like this:
// This is a one line commentor like this:
/*this is
a multiline
comment*/Also if you missed any of these empty quotes (highlight red):
dynimages[5]=["DANCE2.jpg", ""]or the comma's that precede them, it will break the script. To really diagnose a script of this nature I need a working (or not working) demo. The snippet you provide, although extensive, is insufficient to determine what the problem might actually be. The best thing is:

.
bwilson
06-21-2005, 01:40 PM
Thanks for your reply. I checked the empty quotes and the commas, they were all there. On the actual URL I did not have the comment statements in there, I only added them to the email to send the request for help, to try to identify parts for anybody who tried to help. This will help more, here is the URL for the page I am trying to use the Thumbnail View on:
http://www.sc.edu/~bwilson/uis/media_services/photo.html

If anybody can offer help on why you can't see the large image when you mouseover the small thumbnails, please let me know. Thanks
bwilson
jscheuer1
06-21-2005, 05:51 PM
That did help! This might not be the whole problem but, must be corrected first and probably is the only thing:

Where the script is looking for the larger images, they are not there. Change all of these:
dynimages[0]=["BUSINESS_PLAZA.jpg", ""]to look more like this:
dynimages[0]=["../images/BUSINESS_PLAZA.jpg", ""]
jscheuer1
06-21-2005, 06:59 PM
I discovered another problem. Due to your layout, the images still will not display. You also need to change this:


<!--webbot bot="HTMLMarkup" startspan --><div id="dynloadarea" style="width:320px; height:514px;"></div><!--webbot bot="HTMLMarkup" endspan i-checksum="17728" -->to this:


<div id="dynloadarea" align="center" style="width:320px;height:514px;float:right;z-index:200;position:relative;top:300px;left:-2px!important;left:-3px;overflow:hidden"></div>

Also, even with the corrected paths I mentioned in my previous post, two large images are still unavailable:

MCKISSICK.jpg

and

WB_STADIUM.jpg

Make sure these actually exist and are named & located properly in the code.

One other thing, you might want to crop 3px off the left edge of:

CREPE_GATE.jpg

It has a 3px black line running down it there.
bwilson
06-21-2005, 08:02 PM
Thanks so much John, I really appreciate you taking the time to make some recommendations to make the Image Thumbnail Viewer II work on my URL. I can't express how great this looks and works now. Couldn't have pulled it off without your input. Thank you, thank you, thank you.
Becky