Как найти конфликт между bxslider и fancybox?

Question

[Дмитрий]

Использую совместно bxslider и fancybox. Появляется такая проблема: иногда окно fancybox открывается 2 раза подряд, то есть fancybox генерирует свой div, а под ним еще один точно такой же. Проявляется не всегда, иногда создает один div как и надо. Не могу понять в чем проблема и как поправить.


Использую HTML такого вида:

<div class="bxslider">
 <div class="photo_wrapper"><a data-fancybox="1" href="#"><img src="#" alt=""></a></div>
 <div class="photo_wrapper"><a data-fancybox="1" href="#"><img src="#" alt=""></a></div>
 <div class="photo_wrapper"><a data-fancybox="1" href="#"><img src="#" alt=""></a></div>
</div>
<div class="bx-pager">
 <a data-slide-index="0" href=""><img src="#" /></a>
 <a data-slide-index="1" href=""><img src="#" /></a>
 <a data-slide-index="2" href=""><img src="#" /></a>
</div>

JS:

/* ============== BXSLIDER ============== */
$('.bxslider').each(function(i,j) {
   $(this).addClass('bx_custom'+(i+1));
});
$('.bx-pager').each(function(i,j) {
   $(this).addClass('bx_custom'+(i+1));
});

var sliderCount = 1;
$('.bxslider').each(function() {
	$('.bxslider.bx_custom' + sliderCount).bxSlider({
	//параметры слайдера
   mode: "fade",
   controls: false,
   slideWidth: 670,
   infiniteLoop: false,
   pagerCustom: $('.bx-pager.bx_custom' + sliderCount),
  });
	sliderCount++;
});
/* ============== END ============== */	

/* ============== FANCYBOX ============== */
$("[data-fancybox]").fancybox({
	infobar: false,
	arrows: false,
	idleTime: false,
	thumbs : {
		autoStart : true
	},
	buttons: [
        "close"
    ],
});
/* ============== END ============== */

Comments

[Ирина]

Посмотрите через firefox - там в панели разработчика в инспекторе около элементов указаны события, которые висят на элементе.
Может у вас на некоторые элементы повешан как-то фэнсибокс дважды, тут и увидете
dl4.joxi.net/drive/2018/06/27/0025/1444/1684900/00...

[Дмитрий]

Ирина, да, вы правы, там действительно фэнсибокс два раза на тэг a повешен
Вот только если использовать без связки с bxslider то код тоже 2 раза вешается, но срабатывает всегда один раз.

Answer 1

[alex-1917]

Два раза приклеивается - ищи тщательнее, в соседнем скрипте возможно сидит навеска.
Попробуй убрать этот кусок, будет ли навешиваться фэнси??:

/* ============== FANCYBOX ============== */
$("[data-fancybox]").fancybox({
  infobar: false,
  arrows: false,
  idleTime: false,
  thumbs : {
    autoStart : true
  },
  buttons: [
        "close"
    ],
});
/* ============== END ============== */

Ну а по поводу слайдера - юзай slick!
Slick+Fancybox = Железобетон

Comments

[Дмитрий]

Убрал - не помогло.
Уже все сделал, переделывать слайдер уже лень, но видимо придется )