javascript - 单击内容区域外部关闭 GLightbox 画廊

Question

我正在将 GLightbox JS 库用于作品集图库，并希望在单击内部元素外部时能够关闭图库。

我发现了类似性质的其他问题，但我避免使用 jQuery，并且无法找到适合此特定用例的解决方案。另外，看起来我想要的功能是内置的。我只是想访问它。

该文档列出了许多选项，其中包括使用默认按钮以外的其他功能关闭图库的功能。

他们的文档在这里:http://glightbox.mcstudios.com.mx/

图库的标记是动态生成的，并遵循以下结构:

<div class="goverlay"></div><!-- background overlay -->
<div class="gcontainer"><!-- main container -->
  <div id="lightbox-slider">
    <div class="gslide">
      <div class="gslide-inner-content"><!-- image/text content -->
        <img src="img/image.jpg" alt="">
      </div>
    </div>
  </div>
</div>

根据他们的文档，有一种方法可以触发关闭页面底部列出的图库:

// Close the lightbox
myLightbox.close();

我希望能够单击 .gslide-inner-content 外部来关闭图库，这是我迄今为止想到的基本想法:

var closeTheGallery = document.getElementsByClassName('.gslide');

closeTheGallery.onclick = function() {
  myLightbox.close();
  e.stopPropagation();
};

我已经针对各种父元素和子元素尝试了上述代码的多次迭代，以查看是否有任何我可以 Hook 的内容。到目前为止还没有运气 - 任何见解将不胜感激 - 提前致谢。

Answer 1

myLightbox.close();无论发生什么事件或<div>，该功能似乎都没有做任何事情。我用过，但是Doug提供了一些有用的指导。

作为解决方法，我添加了一个事件监听器来单击 .current滑动容器并将其设置为触发默认 .gclose 上的另一次单击按钮。

// find .current slide item and listen for click
// once click happens, trigger click for the close button
document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'current')) {
      document.querySelector('.gclose').click();
    }
}, false);

这可能不是最优雅的解决方案，但它可以完成工作并且不会干扰图库的现有功能。

在这里发布代码，以防其他使用 GLightbox 库的人遇到同样的事情。