Inner Zoom image when clicking on fancybox image gallery

Question

I am using fancybox for my web application

Jquery

$(".fancybox").fancybox({
  openEffect    : 'none',
  closeEffect   : 'none',
  afterLoad :function() {
    this.title = 'Click to Enlarge';
  },
  afterShow :function() {
    $(".fancybox").zoom({on:"click"});
  }
});

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_b.jpg" title="Sgwd Ddwli Uchaf, Brecon Waterfalls (technodean2000)">
    <img src="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5444/17679973232_568353a624_b.jpg" title="Golden Manarola (Sanjeev Deo)">
    <img src="http://farm6.staticflickr.com/5444/17679973232_568353a624_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg" title="Codirosso spazzacamino (Massimo Greco _Foligno)">
    <img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5612/15344856989_449794889d_b.jpg" title="Morning Twilight (Jose Hamra Images)">
    <img src="http://farm6.staticflickr.com/5612/15344856989_449794889d_m.jpg" alt="" />
</a>

I want to when open the fancy box image gallery after i click on center of image at the time if image are bigger than box then that zooming on inner of fancy-box and moving image on courser move.

Here on my code there is 4 images. if 2nd and 3rd image bigger than box then display title "Click to enlarge" and Zooming in on clicking only for 2nd and 3rd image not for 1st and 4th.

Thanks in advance on your replay

Answer 1

You should do like

 $(document).ready(function(){ $(".fancybox").fancybox({ openEffect : 'none', closeEffect : 'none', afterLoad :function() { this.title = 'Click to Enlarge'; }, afterShow :function() { //$(".fancybox").zoom({on:"click"}); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/> <a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_b.jpg" title="Sgwd Ddwli Uchaf, Brecon Waterfalls (technodean2000)"> <img src="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_m.jpg" alt="" /> </a> <a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5444/17679973232_568353a624_b.jpg" title="Golden Manarola (Sanjeev Deo)"> <img src="http://farm6.staticflickr.com/5444/17679973232_568353a624_m.jpg" alt="" /> </a> <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg" title="Codirosso spazzacamino (Massimo Greco _Foligno)"> <img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" /> </a> <a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5612/15344856989_449794889d_b.jpg" title="Morning Twilight (Jose Hamra Images)"> <img src="http://farm6.staticflickr.com/5612/15344856989_449794889d_m.jpg" alt="" /> </a>