javascript - 嵌套到另一个函数中的 Fancybox 函数不起作用

Question

我正在努力将我的图库缩略图转换成花式框链接，但是当我尝试将图像内容定位到 .gallery-overlay 下时，它不起作用，页面只是重定向到照片的来源。我在这里做错了什么？ JQuery 和 fancybox 正确链接，

$('.gallery-overlay').click(function(){
    $(this).find('.fancybox').fancybox();
});

在 2(!)次点击后带出 fancybox，但是以一种无用的、不正确的方式。

$(document).ready(function() {
  $('.gallery-overlay').click(function() {
    $(this).children('img').fancybox();
  });
});

.gallery-overlay {
  position: relative;
  width: 100%;
  transition: 1s;
}
.gallery-overlay img {
  z-index: -1;
  position: relative;
}
.gallery-overlay:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .7)70%);
  transition: 1s;
}
.gallery-caption {
  color: white;
  top: 75%;
  text-transform: uppercase;
  font-weight: bold;
  position: absolute;
  width: 100%;
  opacity: 0;
  z-index: 102;
  transition: 1s;
}
.gallery-item:hover .gallery-caption {
  display: block;
  transition: 1s;
  opacity: 1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js" type="text/javascript" charset="utf-8"></script>

<div class="row">
  <div class="col-sm-4 gallery-item">
    <div class="gallery-overlay">
      <a class="fancybox" rel="portfolio" href="photos/office_woman_l.jpg">
        <img class="img-responsive" src="photos/thumbnail.jpeg" alt="thumbnail">
      </a>
    </div>
    <h3 class="gallery-caption text-center">Item caption</h3>
  </div>
  <div class="col-sm-4 gallery-item">
    <div class="gallery-overlay">
      <a class="fancybox" rel="portfolio" href="photos/laptop_l.jpg">
        <img class="img-responsive" src="photos/thumbnail.jpeg" alt="thumbnail">
      </a>
    </div>
    <h3 class="gallery-caption text-center">Item caption</h3>
  </div>
  <div class="col-sm-4 gallery-item">
    <div class="gallery-overlay">
      <a class="fancybox" rel="portfolio" href="photos/glasses_woman_l.jpg">
        <img class="img-responsive" src="photos/thumbnail.jpeg" alt="thumbnail">
      </a>
    </div>
    <h3 class="gallery-caption text-center">Item caption</h3>
  </div>
</div>

Answer 1

您应该申请 .fancybox()标记 <a>并阻止此标签上的点击事件。另外，你应该把标签 <h3>在.gallery-overlay里面.当标题出现时，它覆盖了 .gallery-overlay并且不会触发点击事件。

$(document).ready(function() {
    $('.gallery-overlay').click(function(e) {
        e.preventDefault();
        $(this).children('a').fancybox();
    });
});

https://jsfiddle.net/alexndreazevedo/u9d2pwo8/