title: Dynamically Changing Image Viewed in Lightbox
body: <p>I have a gallery of thumbnails that display a larger version when you click them. I want that larger image to appear in lightbox when clicked. On page load, the initial image displayed works fine. But, when I click one of the thumbnails, while it appears as a larger image, lightbox only displays the original image. Am I missing some code, or is this a possible limitation of lightbox?</p>
  
  <p><a href="http://hatzelandbuehler.com/_staging/index.php?page=project_profiles&amp;category=healthcare&amp;project=capital-health" rel="nofollow">Go here for example</a></p>
  
  <pre><code>&lt;a href="/uploads/portfolio/fullsize/bigimage.jpg" id="bigImgLink" rel="lightbox"&gt;&lt;img src="/uploads/portfolio/fullsize/bigimage.jpg" alt="" class="fullsize" id="bigImg" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Snippet of the Javascript</p>
  
  <pre><code>imagearray = new Array('CapitalHealth_01alt_WEB-2225.jpg','CapitalHealth_16_WEB-1311.jpg','CapitalHealth_18retouched_WEB-6133.jpg','CapitalHealth_09_retouched_WEB-6020.jpg','CapitalHealth_13_WEB-8373.jpg');
  currentimage = 0;
  totalimages= imagearray.length;
          $(".navigation").click(function() {
                              if ( $(this).attr('id') == 'previous-image' ) {
                                  currentimage = (currentimage &gt; 0) ? currentimage - 1 : totalimages - 1;
                              } else {
                                  currentimage = (currentimage &lt; (totalimages - 1)) ? currentimage + 1 : 0;
                              }
  
                              $("img#bigImg").attr('src',"/uploads/portfolio/fullsize/" + imagearray[currentimage]);
                              $("a#bigImgLink").attr('href',"/uploads/portfolio/fullsize/" + imagearray[currentimage]);
      });
  </code></pre>