Clicking outside of image causes zoom to enable only on mobile

[nathanielperales]

Hi,

This issue only shows up on mobile.

Essentially we wanted a button that people could click to view info about the image, so I created one in the caption, but every time I would click on it, it would force the image to get stuck and enable this is-dragging class on the slide which would cause it to zoom weird. I disabled that click event, but no matter what, if you click on anything besides the slide / image and then try to drag to switch slides, it gets stuck in this weird zoom effect.

You can preview this, test on your phone or mobile inspector: http://jakedarwen440.com/gallery.html

These are my settings:

var isMobile = window.matchMedia("only screen and (max-width: 991px)");
Fancybox.bind("[data-fancybox]", {
  dragToClose: false,
  click: infoShow(),
  zoom: false,
  Toolbar: {
    display: [
      "counter",
      "thumbs",
      "close",
    ],
  },
  Panzoom: {
    touch: false,
  },
  Image: {
    click: "null",
    zoom: false,
  },
  Thumbs: {
    autoStart: false,
  },
  on: {
    done: (fancybox, slide) => {
      $('.info').on('click', function(event){
        infoShow();
      });
      if ("info" in localStorage) {
        $('.info').addClass('show');
      } else {
        $('.info').removeClass('show');
      }
      if (isMobile.matches) {
        $('.info').addClass('show');
        window.localStorage.setItem('info', 'Show Info');
      }
    }
  }
});
function infoShow() {
  if ($('.info').hasClass('show')) {
    $('.info').removeClass('show');
    window.localStorage.clear();
  } else {
    $('.info').addClass('show');
    window.localStorage.setItem('info', 'Show Info');
  }
}

Have you ever seen this? Any help is appreciated.

Thanks