title: Modifying a jquery zoom on mouseover script
body: <p>I am using this zoom on hover script <a href="http://www.jacklmoore.com/zoom/" rel="nofollow">http://www.jacklmoore.com/zoom/</a></p>
  
  <p>I am trying to implement this into a gallery type page but the hover function seems to only work on the first image</p>
  
  <pre><code>&lt;span class='zoom' id='ex1'&gt;
  &lt;img src='http://i.imgur.com/y2qMsNn.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/&gt;
  &lt;p&gt;Hover&lt;/p&gt;
  &lt;/span&gt;
  &lt;span class='zoom' id='ex1'&gt;
  &lt;img src='http://i.imgur.com/y2qMsNn.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/&gt;
  &lt;p&gt;Hover&lt;/p&gt;
  &lt;/span&gt;
  &lt;span class='zoom' id='ex1'&gt;
  &lt;img src='http://i.imgur.com/y2qMsNn.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/&gt;
  &lt;p&gt;Hover&lt;/p&gt;
  &lt;/span&gt;    
  </code></pre>
  
  <p>Heres a demo of my situation <a href="http://jsfiddle.net/drhbt/" rel="nofollow">http://jsfiddle.net/drhbt/</a></p>
  
  <p>How can I have the script give every image the zoom function?</p>
  
  <p>Thanks for your help!</p>