Jquery zoom on cycle?

Jquery zoom on cycle?

Hi guys,

I have a web page, on this web page I have couple of images. When user clicks on the image, image disappears and the UL tag displays. (I am using this plugin  http://jquery.malsup.com/cycle/)

Here is the HTML:
  1. <div id="right4" class="pics">
  2.     <img class="img-center" src="images/smart-agriculture1.png" width="168" height="168" alt="Akıllı Tarım"/>
  3.     <ul class="solutions-ul">
  4.         <li lang="tr">
  5.             <i class="fa fa-caret-right"></i> Gübreleme
  6.         </li>
  7.         <li lang="tr">
  8.             <i class="fa fa-caret-right"></i> Şarap Kalite Artırılması
  9.         </li>
  10.         <li lang="tr">

  12.             <i class="fa fa-caret-right"></i> <a class="fancybox" rel="gallery4" href="/images/flyers/smart_agriculture.jpg">Akıllı Tarım</a>
  13.         </li>
  14.     </ul>
  15. </div>
Here is the JQuery for cycle:
  2. $("#right4").cycle({
  3.     fx: 'curtainX',
  4.     next: '#right',
  5.     timeout: 0,
  6.     easing: 'easeInOutBack'
  7. });
What I would like to do is, when the user clicks the anchor tag in the UL above, image displays in a modal box (fancybox or something) then user can zoom/pan on the image itself. I tried fancybox and elevatezoom but couldn't manage. How can I zoom?

Best Regards.