javascriptjqueryfancyboxfancybox-3

Fancybox 3: Disable zoom when image is clicked

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.

Can someone give me a hand with this?

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>

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

  • Just use clickContent option:

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

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

    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.