SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question same javascripts on same page

    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...kssubpage.html

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

    Any help is much appreciated!

  2. #2
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    http://line25.com/articles/rounding-...ghtbox-scripts

    Please do note that in your example, if the javascript is disabled then the user won't be able to view the big image.
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  3. #3
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And here is your example redone...

    Code:
    <!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...s/closeup1.gif",
       "http://www.silverlakefabrication.com...s/closeup2.gif",
       "http://www.silverlakefabrication.com...s/closeup3.gif",
       "http://www.silverlakefabrication.com...s/closeup4.gif",
       "http://www.silverlakefabrication.com...s/closeup5.gif",
       "http://www.silverlakefabrication.com...s/closeup6.gif",
       "http://www.silverlakefabrication.com...s/closeup7.gif",
       "http://www.silverlakefabrication.com...s/closeup8.gif",
       "http://www.silverlakefabrication.com...rksmainpic.gif"
       );
    preloading(
       img2000poundforksArray, 
       "http://www.silverlakefabrication.com...s/closeup1.gif",
       "http://www.silverlakefabrication.com...s/closeup2.gif",
       "http://www.silverlakefabrication.com...s/closeup3.gif",
       "http://www.silverlakefabrication.com...s/closeup4.gif",
       "http://www.silverlakefabrication.com...s/closeup5.gif",
       "http://www.silverlakefabrication.com...s/closeup6.gif",
       "http://www.silverlakefabrication.com...s/closeup7.gif",
       "http://www.silverlakefabrication.com...s/closeup8.gif",
       "http://www.silverlakefabrication.com...rksmainpic.gif"
       );
    preloading(
       img4000poundforksArray,
       "http://www.silverlakefabrication.com...s/closeup1.gif",
       "http://www.silverlakefabrication.com...s/closeup2.bmp",
       "http://www.silverlakefabrication.com...s/closeup3.bmp",
       "http://www.silverlakefabrication.com...s/closeup4.gif",
       "http://www.silverlakefabrication.com...s/closeup5.gif",
       "http://www.silverlakefabrication.com...s/closeup6.gif",
       "http://www.silverlakefabrication.com...s/closeup7.bmp",
       "http://www.silverlakefabrication.com...s/closeup8.gif",
       "http://www.silverlakefabrication.com...s/closeup9.gif",
       "http://www.silverlakefabrication.com.../closeup10.gif",
       "http://www.silverlakefabrication.com...rksmainpic.gif"
       );
     
     
    
    </script>
    </head>
    <body>
    
     <div style="border: 1px solid red;">
      <a name="500poundforks"></a>
      <img id="500poundforks" src="http://www.silverlakefabrication.com...rksmainpic.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...closeup1th.gif" border="0" alt="Close up 1"></img></a>
       
      <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[1], '500poundforks')"><img src="http://www.silverlakefabrication.com...closeup2th.gif" border="0" alt="Close up 2"></img></a>
      
      <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[2], '500poundforks')"><img src="http://www.silverlakefabrication.com...closeup3th.gif" border="0" alt="Close up 3"></img></a>
       
      <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[3], '500poundforks')"><img src="http://www.silverlakefabrication.com...closeup4th.gif" border="0" alt="close up 4"></img></a>
       
      <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[4], '500poundforks')"><img src="http://www.silverlakefabrication.com...closeup5th.gif" border="0" alt="Close up 5"></img></a>
       
      <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[5], '500poundforks')"><img src="http://www.silverlakefabrication.com...closeup6th.gif" border="0" alt="Close up 6"></img></a>
       
      <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[6], '500poundforks')"><img src="http://www.silverlakefabrication.com...closeup7th.gif" border="0" alt="Close up 7"></img></a>
       
      <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[7], '500poundforks')"><img src="http://www.silverlakefabrication.com...closeup8th.gif" border="0" alt="Close up 8"></img></a>
       
      <a href="#500poundforks" onclick="ImgSwap(img500poundforksArray[8], '500poundforks')"><img src="http://www.silverlakefabrication.com...undforksth.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...rksmainpic.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...closeup1th.gif" border="0" alt="Close up 1"></img></a>
       
      <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[1], '2000poundforks')"><img src="http://www.silverlakefabrication.com...closeup2th.gif" border="0" alt="Close up 2"></img></a>
      
      <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[2], '2000poundforks')"><img src="http://www.silverlakefabrication.com...closeup3th.gif" border="0" alt="Close up 3"></img></a>
       
      <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[3], '2000poundforks')"><img src="http://www.silverlakefabrication.com...closeup4th.gif" border="0" alt="close up 4"></img></a>
       
      <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[4], '2000poundforks')"><img src="http://www.silverlakefabrication.com...closeup5th.gif" border="0" alt="Close up 5"></img></a>
       
      <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[5], '2000poundforks')"><img src="http://www.silverlakefabrication.com...closeup6th.gif" border="0" alt="Close up 6"></img></a>
       
      <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[6], '2000poundforks')"><img src="http://www.silverlakefabrication.com...closeup7th.gif" border="0" alt="Close up 7"></img></a>
       
      <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[7], '2000poundforks')"><img src="http://www.silverlakefabrication.com...closeup8th.gif" border="0" alt="Close up 8"></img></a>
       
      <a href="#2000poundforks" onclick="ImgSwap(img2000poundforksArray[8], '2000poundforks')"><img src="http://www.silverlakefabrication.com...undforksth.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...rksmainpic.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...closeup1th.gif" border="0" alt="Close up 1"></img></a>
       
      <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[1], '4000poundforks')"><img src="http://www.silverlakefabrication.com...closeup2th.gif" border="0" alt="Close up 2"></img></a>
      
      <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[2], '4000poundforks')"><img src="http://www.silverlakefabrication.com...closeup3th.gif" border="0" alt="Close up 3"></img></a>
       
      <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[3], '4000poundforks')"><img src="http://www.silverlakefabrication.com...closeup4th.gif" border="0" alt="close up 4"></img></a>
       
      <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[4], '4000poundforks')"><img src="http://www.silverlakefabrication.com...closeup5th.gif" border="0" alt="Close up 5"></img></a>
       
      <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[5], '4000poundforks')"><img src="http://www.silverlakefabrication.com...closeup6th.gif" border="0" alt="Close up 6"></img></a>
       
      <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[6], '4000poundforks')"><img src="http://www.silverlakefabrication.com...closeup7th.gif" border="0" alt="Close up 7"></img></a>
       
      <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[7], '4000poundforks')"><img src="http://www.silverlakefabrication.com...closeup8th.gif" border="0" alt="Close up 8"></img></a>
       
      <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[8], '4000poundforks')"><img src="http://www.silverlakefabrication.com...closeup9th.gif" border="0" alt="Close up 9"></img></a>
      
      <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[9], '4000poundforks')"><img src="http://www.silverlakefabrication.com...loseup10th.gif" border="0" alt="Close up 10"></img></a>
        
      <a href="#4000poundforks" onclick="ImgSwap(img4000poundforksArray[10], '4000poundforks')"><img src="http://www.silverlakefabrication.com...undforksth.gif" border="0" alt="4000poundforksth"></img></a>
     
     </div>
    </body>
    </html>
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  4. #4
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •