在 Fancybox 和 Owl Carousel 中发出打开图像

Posted 2023-05-07

【中文标题】在 Fancybox 和 Owl Carousel 中发出打开图像

【英文标题】：Issue opening images in Fancybox and Owl Carousel

【发布时间】：2022-01-17 22:00:44

【问题描述】：

点击图片时会打开一个 Fancybox。当滑动到第二张图片并关闭 Owl Carousel 中的 Fancybox 时。关闭花哨的框显示 Owl Carousel 中的第二张图像。我需要设置为第一张图片

$('.owl-carousel').owlCarousel(
  items: 1,
  loop: true,
  pagination: false,
  slideSpeed: 700,
  paginationSpeed: 700,
  rewindSpeed: 700,
  lazyLoad: true,
  margin: 30
);

$().fancybox(
  afterClose: function() 
    // here after fancy box i want to reset to 1st image active 
  
);

figure 
  margin: 15px 0;


figcaption 
  text-align: center;


.grayscale 
  filter: grayscale(0);


.grayscale:hover 
  filter: grayscale(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>
<div class="container-fluid">
  <h1 class="text-center">Mountains</h1>
  <div class="row">
    <div class="col-sm-6 col-md-3 col-lg-3 owl-carousel owl-theme">
      <figure>
        <a href="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bW91bnRhaW5zfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60" data-fancybox="images">
          <img src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bW91bnRhaW5zfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60 " class="img-thumbnail grayscale ">
        </a>
        <figcaption>Mountain 2</figcaption>
      </figure>
      <figure>
        <a href="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg " data-fancybox="images ">
          <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg " class="img-thumbnail grayscale ">
        </a>
        <figcaption>Mountain 2</figcaption>
      </figure>
    </div>
  </div>
</div>

【问题讨论】：

仅供参考，在使用 Fancybox 时，将 Fancybox v4 与开箱即用的 Carousel 结合起来要容易得多，请参阅 fancyapps.com/docs/ui/fancybox/#combine-with-carousel

【参考方案1】：

     $('[data-fancybox="images"]').each(function()
        var relValue = $(this).attr('rel');
        $('[data-fancybox="images"][rel="'+relValue+'"]').fancybox(
            backFocus : false,
            hash   : false,
            afterClose: function() 
               
            

        );
    );