Fancybox с совой карусели отдельных галерей на одной странице?

Question

Продолжая этот вопрос Fancybox с совой каруселью (lazyLoad)

Как разделить 2 галереи на одной странице, если атрибут data-fancybox удален?

Я добавил data-fancybox="gallery01" для первой галереи и data-fancybox="gallery02" для второй, но это не помогло.

Пример: https://codepen.io/V_V_V/pen/vYOBeXb

// OwlCarousel2
// ============

$('.owl-one').owlCarousel({
  items : 1,
  loop : true,
  pagination : false,
  slideSpeed : 700,
  paginationSpeed : 700,
  rewindSpeed : 700,
  lazyLoad : true
});

$('.owl-two').owlCarousel({
  items : 2,
  loop : true,
  pagination : false,
  slideSpeed : 700,
  paginationSpeed : 700,
  rewindSpeed : 700,
  lazyLoad : true
});

// fancybox
// ========

$().fancybox({
  selector : '.owl-item:not(.cloned) a',
  backFocus : false,
  hash   : false,
  thumbs : {
    autoStart : true
  },
  buttons : [
    'zoom',
    'download',
    'close'
  ]
});


// Attach custom click event on cloned elements, 
// trigger click event on corresponding link.
// ================================================
$(document).on('click', '.owl-item.cloned a', function(e) {
  var $slides = $(this)
    .parent()
    .siblings('.owl-item:not(.cloned)');

  $slides
    .eq( ( $(this).attr("data-index") || 0) % $slides.length )
    .find('a')
    .trigger("click.fb-start", { $trigger: $(this) });

  return false;
});

.img_container{width:50%}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.4/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.4/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<h2>Gallery #1</h2>
<div class="img_container owl-one owl-carousel owl-theme">
  <a href="https://placehold.it/350x250&text=1" data-index="0">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=2" data-index="1">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=3" data-index="2">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=4" data-index="3">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
  </a>
</div>
<br />
<h2>Gallery #2</h2>
<div class="img_container owl-two owl-carousel owl-theme">
  <a href="https://placehold.it/350x250&text=1" data-index="0">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=2" data-index="1">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=3" data-index="2">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=4" data-index="3">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
  </a>
  <a href="https://placehold.it/350x250&text=5" data-index="4">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
  </a>
</div>

Галерея # 1 Изображение ｜ 1-2-3-4 ｜

Галерея # 2 Изображение ｜ 1-2-3 -4-5 |