title: How to make the image zoom on click on button
body: <p>I have an <code>JQuery</code> image zooming plugin, when i click on image, clicked part will zoom.</p>
  
  <p>but i have css buttons at some parts of the image, when i click on that buttons, that part of image should zoom up.</p>
  
  <p>But now it is not zooming when i click on those css buttons.</p>
  
  <p>How can i do this?</p>
  
  <p>i am using <a href="http://www.jacklmoore.com/zoom/" rel="nofollow">http://www.jacklmoore.com/zoom/</a> for zooming option.</p>
  
  <p>Jquery code:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){    
          $('#ex4').zoom({ on:'toggle',duration: 500 });
      });
  </code></pre>
  
  <p>css for buttons</p>
  
  <pre><code>.f1 {
      left: 193px;
      position: relative;
      top: -400px;
  }
  
  .f2 {
      left: 166px;
      position: relative;
      top: -250px;
  }
  
  .f3 {
      left: 117px;
      position: relative;
      top: -180px;
  }
  
  .f4 {
      left: 425px;
      position: relative;
      top: -363px;
  }
  
  .f5 {
      left: 339px;
      position: relative;
      top: -375px;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>html code for buttons</p>
  
  <pre><code>&lt;span class="f1"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/span&gt;
  &lt;span class="f2"&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/span&gt;
  &lt;span class="f3"&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/span&gt;
  &lt;span class="f4"&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/span&gt;
  &lt;span class="f5"&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/span&gt;
  &lt;span class="f6"&gt;&lt;a href="#"&gt;6&lt;/a&gt;&lt;/span&gt;
  &lt;span class="f7"&gt;&lt;a href="#"&gt;7&lt;/a&gt;&lt;/span&gt;
  &lt;span class="f8"&gt;&lt;a href="#"&gt;8&lt;/a&gt;&lt;/span&gt;
  &lt;span class="f9"&gt;&lt;a href="#"&gt;9&lt;/a&gt;&lt;/span&gt;
  &lt;span class="f10"&gt;&lt;a href="#"&gt;10&lt;/a&gt;&lt;/span&gt;
  </code></pre>