FancyBox v3/Owl Carousel v2 как решить проблему с зацикленной каруселью?

Question

[bitrayder]

День добрый, что-то искал искал ответ так и не смог найти
Как из fancyBox исключить картинки с классом cloned?
есть карусель с картинками Owl Carousel и кнопкой для увлечения через fancyBox
если в самой карусели картинок 5 то уже fancyBox в своей карусели на счётчике показывает 11,
5 клонов и ещё один активный клон...

Answer 1

[alezzz]

Можно например так:

$().fancybox({
    selector : '.owl-item:not(.cloned) a'
});

Comments

[Сергей Мартыненко]

На сайте 2 галереи.
Одна запускается так:

$().fancybox({
    selector : '[data-fancybox="images"]'
});

Вторая так:

$().fancybox({
    selector : '[data-fancybox="group"]'
});

Я попробовал так

$().fancybox({
    selector : '.owl-item:not(.cloned) a[data-fancybox="images"]'
});

Элементов всё равно в два раза больше. Подскажите, плиз, что не так

[alezzz]

Не самое красивое решение, но тем не менее работает:
HTML:

<div id="images" class="owl-carousel">
	<a href="/src/img_1.jpg" data-fancybox="images">
		<img src="/thumb/img_thumb_1.jpg">
	</a>
	<a href="/src/img_2.jpg" data-fancybox="images">
		<img src="/thumb/img_thumb_2.jpg">
	</a>
	<a href="/src/img_3.jpg" data-fancybox="images">
		<img src="/thumb/img_thumb_3.jpg">
	</a>
        ..................................
</div>
<div id="group" class="owl-carousel">
	<a href="/src/img_4.jpg" data-fancybox="group">
		<img src="/thumb/img_thumb_4.jpg">
	</a>
	<a href="/src/img_5.jpg" data-fancybox="group">
		<img src="/thumb/img_thumb_5.jpg">
	</a>
	<a href="/src/img_6.jpg" data-fancybox="group">
		<img src="/thumb/img_thumb_6.jpg">
	</a>
        ..................................
</div>

JS:

$("#images").owlCarousel({
    loop:true,
    items: 5,
    onInitialized : addFancy
});
$("#group").owlCarousel({
    loop:true,
    items: 3,
    onInitialized : addFancy
});
function addFancy(event) {
	var element = event.target;
	var id = $(element).attr('id');
	$(element).find(".owl-item.cloned a").each(function(indexCloned) {
		var $clonedElem = $(this);
		var link = $clonedElem.attr('href');
		$clonedElem.attr('data-fancybox-trigger', id);
		$clonedElem.attr('href', 'javascript:;');
		$clonedElem.removeAttr('data-fancybox');
		$(element).find(".owl-item:not(.cloned) a").each(function(indexReal) {
			if (link === $(this).attr('href')){
				$clonedElem.attr('data-fancybox-index', indexReal);
			}
		});
	});
}

Fancybox отдельно инициализировать не нужно. Если нужно добавить какое-то параметры в инициализацию, тогда так:

$('[data-fancybox]').fancybox({
    protect: true //пример
});