2017-08-11 79 views
1

我已經使用Kirby CMS(https://getkirby.com/)內的Fancybox 3插件(http://fancyapps.com/fancybox/3/docs/)設置了一個簡單的圖像滑塊。我無法解決的唯一問題是如何在滑塊打開時單擊圖像時停止滑塊放大圖像。Fancybox 3:單擊圖像時禁用縮放

有人能幫我一個忙嗎?

我試着在滑塊的選項中包括clickSlide : 'close',,但它沒有奏效。

以下是我已經設置了滑塊全球在我的網站的選項:

<!-- Setting fancybox-options GLOBALLY --> 

    <script type="text/javascript"> 

     $("[data-fancybox]").fancybox({ 

     thumbs   : false, 

     hash   : false, 

     loop   : true, 

     keyboard  : true, 

     toolbar   : false, 

     animationEffect : false, 

     arrows   : true, 

     }); 

    </script> 

    <!-- /////////////////////// --> 

回答

3

只需使用clickContent選項:

$("[data-fancybox]").fancybox({ 
    thumbs   : false, 
    hash   : false, 
    loop   : true, 
    keyboard  : true, 
    toolbar   : false, 
    animationEffect : false, 
    arrows   : true, 
    clickContent : false 
}); 

演示 - https://codepen.io/anon/pen/XaabLJ?editors=1010

clickSlide選項用於在內容之外點擊,但在幻燈片中。並且由於幻燈片的父級可以調整大小(如在此示例中 - https://codepen.io/fancyapps/pen/ZKqaKO),因此在幻燈片之外單擊時可以使用clickOutside選項。

+0

謝謝,你的文章幫了很多。 – adventistapr