Fancybox Conflict with ionic 1 jqLite

159 views Asked by At

I am using fanybox 3 in my Angular Js 1.3 web application and it works fine. However, when I use the fancybox inside the ionic 1 app, I am receiving the following error when the photo is swiped:

Uncaught TypeError: cssClasses.indexOf is not a function
    at n.fn.init.jqLite.removeClass (ionic-angular.js:268)

This error only happens when the photo is swiped in touch screen and not when the next and prev buttons are pressed. Looking at the ionic-angular.js:268 line, this is what it is:

jqLite.prototype.removeClass = function(cssClasses) {
  var x, y, splitClasses, cssClass, el;
  if (cssClasses) {
    for (x = 0; x < this.length; x++) {
      el = this[x];
      if (el.getAttribute) {
        if (cssClasses.indexOf(' ') < 0 && el.classList.remove) {
          el.classList.remove(cssClasses);
        } else {
          splitClasses = cssClasses.split(' ');

          for (y = 0; y < splitClasses.length; y++) {
            cssClass = splitClasses[y];
            el.setAttribute('class', (
                (" " + (el.getAttribute('class') || '') + " ")
                .replace(/[\n\t]/g, " ")
                .replace(" " + cssClass.trim() + " ", " ")).trim()
            );
          }
        }
      }
    }
  }
  return this;
};

I dont know why the ionic angular line is triggered when fancybox image is swiped. I am suspecting maybe the jqLite used in ionic 1 is conflicting with the jquery 2.1.4 that was included before that together with my angular app?

Or is there some other reason for this issue? Can you help me here please?

0

There are 0 answers