Fancybox 3:单击图像时禁用缩放 [英] Fancybox 3: Disable zoom when image is clicked

问题描述

我已经使用Fancybox 3插件设置了一个简单的图像滑块( http://fancyapps. com/fancybox/3/docs/)在Kirby CMS中( https://getkirby.com/).我唯一无法解决的问题是，当滑动器处于打开状态时单击图像时，如何阻止滑动器放大图像.

I have set up a simple image slider using the Fancybox 3 plugin (http://fancyapps.com/fancybox/3/docs/) within the Kirby CMS (https://getkirby.com/). The only thing I'm not able to work out, is how to stop the slider from zooming into an image when the image is clicked on while the slider is open.

有人可以帮我吗?

我尝试在滑块的选项中包含clickSlide : 'close',，但是没有用.

I tried including clickSlide : 'close', in the options for the slider, but it did not work.

以下是我为网站上的全局滑块设置的选项:

Here are the options I have set up for the slider globally on my site:

  <!-- 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>

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

推荐答案

只需使用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/笔/ZKqaKO )，则在幻灯片外面单击clickOutside选项.

clickSlide option is used for clicks outside content, but inside the slide. And since parent of the slide can be resized (like in this example - https://codepen.io/fancyapps/pen/ZKqaKO), clickOutside option is when clicked outside the slide.

这篇关于Fancybox 3:单击图像时禁用缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！