htmlcsslightgallery

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

How to disable click on .lg-img-wrap?

I have tried lot of solutions but none seems to work on lightgallery.

Tried 1

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

Tried 2

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

Tried 3

pointer-events:none //to a css property

I would like to prevent closing of light gallery when user clicks outside the image.

Black margin is visible when image ratio is not same as that of screen size.

Please check image below for reference. lightbox image

Light Gallery I am using: https://github.com/sachinchoolur/lightGallery

Solution

  • Add closeable: false to your lightGallery initialization. Here's their API describing that feature.

    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>