Thumbnail Viewer II Problem

[drnhdg]

When I set up the script in Dreamweaver I see the thumbnails fine and the script works great. When I upload it to the internet all I get are red x's. I can't see where I'm going wrong!

Here is the code:



<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 no link):
var dynimages=new Array()
dynimages[0]=["images/thumbnails/landscapes/1.jpg", ""]
dynimages[1]=["images/thumbnails/landscapes/2.jpg", ""]
dynimages[2]=["images/thumbnails/landscapes/3.jpg", ""]
dynimages[3]=["images/thumbnails/landscapes/4.jpg", ""]
dynimages[4]=["images/thumbnails/landscapes/5.jpg", ""]
dynimages[5]=["images/thumbnails/landscapes/6.jpg", ""]
dynimages[6]=["images/thumbnails/landscapes/7.jpg", ""]
dynimages[7]=["images/thumbnails/landscapes/8.jpg", ""]
dynimages[8]=["images/thumbnails/landscapes/9.jpg", ""]
dynimages[9]=["images/thumbnails/landscapes/10.jpg", ""]
dynimages[10]=["images/thumbnails/landscapes/11.jpg", ""]
dynimages[11]=["images/thumbnails/landscapes/12.jpg", ""]
dynimages[12]=["images/thumbnails/landscapes/13.jpg", ""]

//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="progidXImageTransform.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>



<td width="60"> <a href="#" onClick="modifyimage('dynloadarea', 0)"><img border="0" src="images/thumbnails/landscapes/1.jpg" width="50" height="50"></a> </td>
<td width="57"> <a href="#" onClick="return modifyimage('dynloadarea', 5)"><img border="0" src="images/thumbnails/landscapes/6.jpg" width="50" height="50"></a></td>
<td width="156"><a href="#" onClick="return modifyimage('dynloadarea', 10)"><img border="0" src="images/thumbnails/landscapes/11.jpg" width="50" height="50"></a></td>
<td width="539" rowspan="5"><div id="dynloadarea" style="width:80px;height:225px"> </div></td>
</tr>
<tr>
<td> <a href="#" onClick="modifyimage('dynloadarea', 1)"><img border="0" src="images/thumbnails/landscapes/2.jpg" width="50" height="50"></a> </td>
<td><a href="#" onClick="return modifyimage('dynloadarea', 6)"><img border="0" src="images/thumbnails/landscapes/7.jpg" width="50" height="50"></a></td>
<td><a href="#" onClick="return modifyimage('dynloadarea', 11)"><img border="0" src="images/thumbnails/landscapes/12.jpg" width="50" height="50"></a></td>
</tr>
<tr>
<td> <a href="#" onClick="return modifyimage('dynloadarea', 2)"><img border="0" src="images/thumbnails/landscapes/3.jpg" width="50" height="50"></a> </td>
<td><a href="#" onClick="return modifyimage('dynloadarea', 7)"><img border="0" src="images/thumbnails/landscapes/8.jpg" width="50" height="50"></a></td>
<td><a href="#" onClick="return modifyimage('dynloadarea', 12)"><img border="0" src="images/thumbnails/landscapes/13.jpg" width="50" height="50"></a></td>
</tr>
<tr>
<td> <a href="#" onClick="return modifyimage('dynloadarea', 3)"><img border="0" src="images/thumbnails/landscapes/4.jpg" width="50" height="50"></a> </td>
<td><a href="#" onClick="return modifyimage('dynloadarea', 8)"><img border="0" src="images/thumbnails/landscapes/9.jpg" width="50" height="50"></a></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="72"> <a href="#" onClick="return modifyimage('dynloadarea', 4)"><img border="0" src="images/thumbnails/landscapes/5.jpg" width="50" height="50"></a></td>
<td><a href="#" onClick="return modifyimage('dynloadarea', 9)"><img border="0" src="images/thumbnails/landscapes/10.jpg" width="50" height="50"></a></td>
<td>&nbsp;</td>
</tr>
</table>



Any help would be appriciated. Thanks.

[jscheuer1]

Red x's, mmmm. You are using IE as your browser, right. Those x's mean that the image files are not where it says they are in the script.

On your website, do you have a directory called 'images' off of the directory where you uploaded your page to? If so, did you upload your images to it? Do these two things and it should work. One other possible problem, if you have all that and it still doesn't work, make sure the case (uppercase/lowercase) of the filenames is exactly the same as written in the script. Locally, case differences are often ignored in such situations, they almost never are on the web. I saw one time where the files were named:

picture.JPG

but the code was:

picture.jpg

This worked locally, but not on the web.

[drnhdg]

Hi there,

I had the images already uploaded to that directory but I tried your suggestion of the case sensitive filenames and that's worked a treat. My filenames were all lowercase but my folders weren't. I changed them to lower case and now the script works great!

Many thanks for your help

[drnhdg]

Hmmm, I've fixed one problem only to confronted with another!

The thumbnails now load fine, when I click one of them the picture starts to appear but then the page reloads! After that it doesn't reload and I can click through them fine but it's still a strange and annoying problem.

Has anybody had anything similar happen or have any idea what would cause this?
Many thanks.

[jscheuer1]

Need to see it in action, so:
PLEASE: Include the URL to your problematic webpage that you want help with.

[drnhdg]

No problem. The URL is,

http://www.geocities.com/epic_test_s...landscapes.htm

Thanks for having a look.

[jscheuer1]

It appears to be something Geocities is doing to the page when you click on any link that is set to href="#". It appears to be a date that is added. Do you have per day, week, or month limits on your account for page requests or anything like that? In any case, a work around might be to create a function:

function nullfunction(){
return;
}

Place it here:

<script type="text/javascript">

function nullfunction(){
return;
}

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

on your page. Then change all occurances of:

href="#"

to:

href="javascript:nullfunction()"

I really don't know if this will take care of it, as I cannot test it on Geocities there. Only you can do that. Another thing would be to simply remove

href="#"

altogether.

[drnhdg]

Hi John,

What you said would make sense as Geocities do put limits on their webspace so I guess that's what it was doing. It's only on Geocities for on-line testing purposes until it finds a permanent home.

Anyway I have tried your suggestion and it has worked a treat so at least I can show my friend, who I'm doing it for, a working version before it goes live.

Many thanks for all your help, much appreciated