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();
};

我已经尝试了上述代码的几次迭代，目标是各种父元素和子元素，以查看是否有任何可以插入的内容。到目前为止没有运气 - 任何见解都会受到赞赏 - 提前感谢。

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图库的用户遇到同样的事情。

点击外部内容区

1 个答案: