1

Continuing this question Fancybox with Owl carousel (lazyLoad)

How to separate 2 galleries on the same page if data-fancybox attribute removed?

I added data-fancybox="gallery01" for the first gallery and data-fancybox="gallery02" for the second, but it didn't help.

Example: 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>

Gallery #1 Image｜1-2-3-4｜

Gallery #2 Image｜1-2-3-4-5｜

Vsevolod
  • 11
  • 2

0 Answers0