內環縮放圖像上的fancybox圖片庫點擊

Question

我使用fancybox我的web應用程序

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> 

時當我點擊圖像中心的時候，如果圖像大於盒子，那麼我想打開花式框圖像庫，然後在花哨的移動中放大花哨框和移動圖像的內部。

在我的代碼中有4個圖像。如果第二張和第三張圖像大於方框，則顯示標題「點擊放大」，然後放大點擊第二張和第三張圖像而不是第一張和第四張圖片。

在此先感謝您的重播

Answer 1

你應該做的像

$(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>