title: How to make a list of image links in jQuery?
body: <p>I have a list of links. What I want to do is attach a function to each link with jQuery; when the link is clicked, the function will run, and a pair of images will be loaded into a div (img ids "img1" and "img2"). Each link has the class "link", and will load a different pair of images. So, the first link will load Image 1A and Image 1B, the second will load Image 2A and 2B, and so on. I have the images in two arrays.</p>
  
  <p>However, instead of attaching the calls like I want, it ends up loading the last two images of the arrays, after the page stops loading. What's more, clicking on the links does nothing!</p>
  
  <pre><code>var loadImages =
  {
      init: function()
      {
          var links = $( ".link" );
          myArray1 = [ 
              "imgs/png/image1.png",
              "imgs/png/image2.png",
              "imgs/png/image3.png",
          ];
          myArray2 = [ 
              "imgs/jpg/image1.jpg",
              "imgs/jpg/image2.jpg",
              "imgs/jpg/image3.jpg",
          ];
          for ( var i = 0, ii = links.length; i &lt; ii; i++ )
          {
              $( links[ i ] ).bind( "click", loadImages.imgLoader( myArray1[ i ],
                  myArray2[ i ] ) );
          }
      },
      imgLoader: function( firstURI, secondURI )
      {
          document.getElementById( "img1" ).src = firstURI;
          document.getElementById( "img2" ).src = secondURI;
      }
  };
  loadImages.init();
  </code></pre>