title: elevateZoom add another picture
body: <p>I downloaded the elevate zoom demo but when i add a 5th image the zoom function doesn't change the image it zooms in on. It worked fine when I only had 4 images and i cant find what is causing it. </p>
  
  <p>Here is the main body, i put the css etc in the html at the moment until i manage to fix it.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset='utf-8'/&gt;
      &lt;title&gt;jQuery elevateZoom Demo&lt;/title&gt;
      &lt;script src='jquery-1.8.3.min.js'&gt;&lt;/script&gt;
      &lt;script src='jquery.elevatezoom.js'&gt;&lt;/script&gt;
  
      &lt;style&gt;
      /*set a border on the images to prevent shifting*/
   #gallery_01 img{border:2px solid white;}
  
   /*Change the colour*/
   .active img{border:2px solid #333 !important;}
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;img id="zoom_03" src="images/small/image1.png" data-zoom-image="images/large/image1.jpg"/&gt;
  
  &lt;div id="gallery_01"&gt;
  
    &lt;a href="#" data-image="images/small/image1.png" data-zoom-image="images/large/image1.jpg"&gt;
      &lt;img id="zoom_03" src="images/thumb/image1.jpg" /&gt;
    &lt;/a&gt;
  
    &lt;a href="#" data-image="images/small/image2.png" data-zoom-image="images/large/image2.jpg"&gt;
      &lt;img id="zoom_03" src="images/thumb/image2.jpg" /&gt;
    &lt;/a&gt;
  
    &lt;a href="#" data-image="images/small/image3.png" data-zoom-image="images/large/image3.jpg"&gt;
      &lt;img id="zoom_03" src="images/thumb/image3.jpg" /&gt;
    &lt;/a&gt;
  
    &lt;a href="#" data-image="images/small/image4.png" data-zoom-image="images/large/image4.jpg"&gt;
      &lt;img id="zoom_03" src="images/thumb/image4.jpg" /&gt;
    &lt;/a&gt;
  
      &lt;a href="#" data-image="images/small/image5.png" data-zoom-image="images/large/image5.jpg"&gt;
      &lt;img id="zoom_03" src="images/thumb/image5.jpg" /&gt;
    &lt;/a&gt;
  
  
  &lt;/div&gt;
  
  &lt;script&gt;
  //initiate the plugin and pass the id of the div containing gallery images
  $("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 
  
  //pass the images to Fancybox
  $("#zoom_03").bind("click", function(e) {  
    var ez =   $('#zoom_03').data('elevateZoom'); 
      $.fancybox(ez.getGalleryList());
    return false;
  });
  &lt;/script&gt;
  
  
  &lt;script&gt;
      $('#zoom_03').elevateZoom({
  
  zoomWindowFadeIn: 500,
  zoomWindowFadeOut: 750
     }); 
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the main code was taken from this site
  <a href="http://www.elevateweb.co.uk/image-zoom" rel="nofollow">here</a></p>
  
  <p>the function I'm trying is the Gallery &amp; Lightbox one</p>