在 Light Gallery 中禁止点击“.lg-img-wrap”class

Question

如何禁止点击 .lg-img-wrap？

我尝试了很多解决方案，但 none 似乎适用于 lightgallery。

尝试了 1

$(".lg-img-wrap").children().unbind('click');

尝试了 2

$(".noclick").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
});

尝试了 3

pointer-events:none //to a css property

我想防止用户在图像外部单击时关闭灯廊。

当图像比例与屏幕尺寸不同时，会出现黑边。

请查看下图以供参考。

我正在使用的灯廊：https://github.com/sachinchoolur/lightGallery

Answer 1

$(".lg-img-wrap").off("click");

或

$(".lg-img-wrap").prop("disabled",true);

或

$('.lg-img-wrap"').click(false);

希望对你有用。干得好。

Answer 2

将 closeable: false 添加到您的 lightGallery 初始化中。 their API 描述了该功能。

Working Codepen

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/css/lightgallery.css" integrity="sha512-I/g40Mx7U2Oepd3iHIpQRqdQGJ3vgdw0ix8LxGxX9zKv1MDizjD6dRcJ3PC1qpyfkj4rikVNcpBKcnmuJWUaTQ==" crossorigin="anonymous" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/js/lightgallery.min.js"></script>
</head>
<div id="lightgallery">
  <a href="https://via.placeholder.com/150">
      <img src="https://via.placeholder.com/150" />
  </a>
</div>

<script type="text/javascript">
    $('#lightgallery').lightGallery({
        closable: false
    }); 
</script>
</html>

在 Light Gallery 中禁止点击“.lg-img-wrap”class

Disable click on ".lg-img-wrap" class in Light Gallery

html

css

lightgallery