Same javascripts on same page

JavaScript
1

Hi everyone! I’m new to sitepoint and I am somewhat new to the web design world that is beyond HTML. I’m in the process of redesigning my fabrication company’s web site and I’ve run into a problem that seems to be fairly common, although I have not found a solution that actually works. Essentially, I have a page on my site that has three different picture arrays that are supposed to allow the user to click on a thumbnail and have the larger picture above be replaced with a larger version of the thumbnail. However, since the javascript is duplicated three times, it does not work at all on the page. I tried renaming the larger picture (variable name), but this doesn’t seem to work. Please take it easy on me as I’m just starting to learn Javascript and my script is even posted on the page itself and not saved to my server. Does anyone know how to separate or rename the scripts so they actually work?

Here’s the page I’m having trouble with:
http://www.silverlakefabrication.com/bucketforkssubpage.html

Here’s a page that works as it should:
http://www.silverlakefabrication.com/trailerhitchsubpage.html

Any help is much appreciated!

2

And here is your example redone…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
var img500poundforksArray  = new Array();
var img2000poundforksArray  = new Array();
var img4000poundforksArray  = new Array();
function preloading(){
 var imgarray;
 for (x=0; x<preloading.arguments.length; x++){
  //argument 1 is the img array to use
  if(x == 0)
   imgarray = preloading.arguments[x];
  else{
   imgarray[x-1] = new Image();
   imgarray[x-1].src = preloading.arguments[x];
  }
 }
}
function ImgSwap(imageToShow, whereToShow){
  var show = document.getElementById(whereToShow);
  if(show){
   //alert(imageToShow.src + ' ' + whereToShow);
   show.src = imageToShow.src;
  }
}
//preload the arrays
preloading(
   img500poundforksArray,
   "http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup1.gif",
   "http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup2.gif",
   "http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup3.gif",
   "http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup4.gif",
   "http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup5.gif",
   "http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup6.gif",
   "http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup7.gif",
   "http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup8.gif",
   "http://www.silverlakefabrication.com/productmainpics/500poundforksmainpic.gif"
   );
preloading(
   img2000poundforksArray, 
   "http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup1.gif",
   "http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup2.gif",
   "http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup3.gif",
   "http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup4.gif",
   "http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup5.gif",
   "http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup6.gif",
   "http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup7.gif",
   "http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup8.gif",
   "http://www.silverlakefabrication.com/productmainpics/2000poundforksmainpic.gif"
   );
preloading(
   img4000poundforksArray,
   "http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup1.gif",
   "http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup2.bmp",
   "http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup3.bmp",
   "http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup4.gif",
   "http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup5.gif",
   "http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup6.gif",
   "http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup7.bmp",
   "http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup8.gif",
   "http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup9.gif",
   "http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup10.gif",
   "http://www.silverlakefabrication.com/productmainpics/4000poundforksmainpic.gif"
   );
 
 

</script>
</head>
<body>

 <div style="border: 1px solid red;">
  <a name="500poundforks"></a>
  <img id="500poundforks" src="http://www.silverlakefabrication.com/productmainpics/500poundforksmainpic.gif" border="0" height="480" width="640" />
  <br />
  <b>PLEASE CLICK ON THE PICTURES BELOW TO SEE CLOSE-UPS OF THE FORKS</b>
  <br />
  
  <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[0], '500poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup1th.gif" border="0" alt="Close up 1"></img></a>
   
  <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[1], '500poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup2th.gif" border="0" alt="Close up 2"></img></a>
  
  <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[2], '500poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup3th.gif" border="0" alt="Close up 3"></img></a>
   
  <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[3], '500poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup4th.gif" border="0" alt="close up 4"></img></a>
   
  <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[4], '500poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup5th.gif" border="0" alt="Close up 5"></img></a>
   
  <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[5], '500poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup6th.gif" border="0" alt="Close up 6"></img></a>
   
  <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[6], '500poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup7th.gif" border="0" alt="Close up 7"></img></a>
   
  <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[7], '500poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/500poundforks/closeup8th.gif" border="0" alt="Close up 8"></img></a>
   
  <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[8], '500poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/500poundforks/500poundforksth.gif" border="0" alt="500poundforksth"></img></a>
 </div>
 <div style="border: 1px solid green; margin-top: 15px;">
  <a name="2000poundforks"></a>
  <img id="2000poundforks" src="http://www.silverlakefabrication.com/productmainpics/2000poundforksmainpic.gif" border="0" height="480" width="640" />
  <br />
  <b>PLEASE CLICK ON THE PICTURES BELOW TO SEE CLOSE-UPS OF THE FORKS</b>
  <br />
  <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[0], '2000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup1th.gif" border="0" alt="Close up 1"></img></a>
   
  <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[1], '2000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup2th.gif" border="0" alt="Close up 2"></img></a>
  
  <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[2], '2000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup3th.gif" border="0" alt="Close up 3"></img></a>
   
  <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[3], '2000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup4th.gif" border="0" alt="close up 4"></img></a>
   
  <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[4], '2000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup5th.gif" border="0" alt="Close up 5"></img></a>
   
  <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[5], '2000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup6th.gif" border="0" alt="Close up 6"></img></a>
   
  <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[6], '2000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup7th.gif" border="0" alt="Close up 7"></img></a>
   
  <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[7], '2000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/2000poundforks/closeup8th.gif" border="0" alt="Close up 8"></img></a>
   
  <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[8], '2000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/2000poundforks/2000poundforksth.gif" border="0" alt="2000poundforksth"></img></a>
 
 </div>
 <div style="border: 1px solid blue; margin-top: 15px;">
  <a name="4000poundforks"></a>
  <img id="4000poundforks" src="http://www.silverlakefabrication.com/productmainpics/4000poundforksmainpic.gif" border="0" height="480" width="640" />
  <br />
  <b>PLEASE CLICK ON THE PICTURES BELOW TO SEE CLOSE-UPS OF THE FORKS</b>
  <br />
  <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[0], '4000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup1th.gif" border="0" alt="Close up 1"></img></a>
   
  <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[1], '4000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup2th.gif" border="0" alt="Close up 2"></img></a>
  
  <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[2], '4000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup3th.gif" border="0" alt="Close up 3"></img></a>
   
  <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[3], '4000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup4th.gif" border="0" alt="close up 4"></img></a>
   
  <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[4], '4000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup5th.gif" border="0" alt="Close up 5"></img></a>
   
  <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[5], '4000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup6th.gif" border="0" alt="Close up 6"></img></a>
   
  <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[6], '4000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup7th.gif" border="0" alt="Close up 7"></img></a>
   
  <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[7], '4000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup8th.gif" border="0" alt="Close up 8"></img></a>
   
  <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[8], '4000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup9th.gif" border="0" alt="Close up 9"></img></a>
  
  <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[9], '4000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/4000poundforks/closeup10th.gif" border="0" alt="Close up 10"></img></a>
    
  <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[10], '4000poundforks')"><img src="http://www.silverlakefabrication.com/productcloseups/4000poundforks/4000poundforksth.gif" border="0" alt="4000poundforksth"></img></a>
 
 </div>
</body>
</html>
3

Your page is too busy and the information is not easy to read. I think, going the lightbox way will clean up your page and not the other way around.

I have gone to your test page. When the page opens, 2 of the place holder big images do not show. Check your urls for these.

I have clicked through the thumbnails and all show. Again check urls and check the array index location.

4

Hi Tahirjadoon,

First of all, thank you so much for your help. You put a lot of time and thought into this. The Light Box thing is a good idea, but I’m trying to get away from having the thumbnails open in a separate window for cleanliness reasons. I tried the reworked code you provided me as well (thank you so much for that too!). Unfortunately, it doesn’t work. To see what I mean, I have posted the mark-up to the following test site.

http://www.silverlakefabrication.com/test2.html

All the thumbnails show up, but when you click on them, nothing happens. The big pictures don’t appear either. Any idea what I’m doing wrong?

Thanks
:shifty:

5

You cannot use the same name multiple times for variables and functions etc. The name needs to be unique. Also, the ids for the elemets need to be unique too. You have assigned id “Mainimage2” to 2 different images.

I would suggest the following 2 for displaying a big image. These are javascript too and very easy to implement.
http://www.huddletogether.com/projects/lightbox2/
and this using jquery

Please do note that in your example, if the javascript is disabled then the user won’t be able to view the big image.