- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在将 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 的内容。到目前为止还没有运气 - 任何见解将不胜感激 - 提前致谢。
最佳答案
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 库的人遇到同样的事情。
关于javascript - 单击内容区域外部关闭 GLightbox 画廊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49327148/
我正在将 GLightbox JS 库用于作品集图库,并希望在单击内部元素外部时能够关闭图库。 我发现了类似性质的其他问题,但我避免使用 jQuery,并且无法找到适合此特定用例的解决方案。另外,看起
我是一名优秀的程序员,十分优秀!