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

Question

点击图片时会打开一个 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>

Answer 1

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

        });
    });