title: Elevate Zoom adjust zoom window for different sized imagery
body: <p>I'm trying out <a href="https://github.com/elevateweb/elevatezoom">Elevate Zoom</a> and I've got a slightl problem i need some help with. </p>
  
  <p>Basically as you will see from the <a href="http://jsfiddle.net/y3vMt/">DEMO</a> i've setup, i am trying to find out if there is way to reinitialize the plugin when you click on a thumbnail or reset the data so that for taller images (the photo of the tower), the zoom window isn't using the dimension of the first image. (which i gather from what i can find out that it is doing)</p>
  
  <p>Unfortunately i don't have the power to make the people using this format their images properly, so accounting for various heights of imagery is needed. Can it be done? </p>
  
  <p><strong>My Code, based on the demo file for the moment</strong></p>
  
  <pre><code>&lt;img style="border:1px solid #e8e8e6;" id="zoom_03" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" 
  data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg"
  width="411"  /&gt;
  
  &lt;div id="gallery_01"&gt;
  
  &lt;a  href="#" class="elevatezoom-gallery active" data-update="" data-image="images/large/image1.jpg" data-zoom-image="images/large/image1.jpg"&gt;
  &lt;img src="images/large/image1.jpg" width="100"  /&gt;
  &lt;/a&gt;
  
  &lt;a  href="#" class="elevatezoom-gallery" data-update="" data-image="images/large/image2.jpg" data-zoom-image="images/large/image2.jpg"&gt;
  &lt;img src="images/large/image2.jpg" width="100"  /&gt;
  &lt;/a&gt;
  
  &lt;a  href="#" class="elevatezoom-gallery" data-image="images/large/image3.jpg" data-zoom-image="images/large/image3.jpg"&gt;
  &lt;img src="images/large/image3.jpg" width="100"  /&gt;
  &lt;/a&gt;
  
  &lt;a  href="#" class="elevatezoom-gallery" data-update="" data-image="images/large/image1.jpg" data-zoom-image="images/large/image1.jpg"&gt;
  &lt;img src="images/large/image1.jpg" width="100"  /&gt;
  &lt;/a&gt;
  
  &lt;a  href="#" class="elevatezoom-gallery" data-update="" data-image="images/large/image5.jpg" data-zoom-image="images/large/image5.jpg"&gt;
  &lt;img src="images/large/image5.jpg" width="100"  /&gt;
  &lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The jQuery</strong></p>
  
  <pre><code>$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'crosshair', galleryActiveClass: "active", zoomType: "inner" }); 
  
  
  var image = $('#gallery_01 a');
  var zoomConfig = {  };
  var zoomActive = false;
  
  image.on('click', function(){
  
          $.removeData(image, 'elevateZoom');//remove zoom instance from image
  
          image.elevateZoom(zoomConfig);//initialise zoom
  
  });
  </code></pre>
  
  <p><strong>Side note</strong></p>
  
  <p>You might notice that I've made all the references to the images to the large file path, this is because in the way i need to use this plugin, the user will only be uploading a medium resolution file. </p>