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

Question

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.

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

score 1 · Accepted Answer · answered Jan 31 '21 at 18:57

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>

Thanks alot for a quick response.. I tried to look for such configuration parameter before, not sure why I couldn't find one.. I will reward you bount after 24 hours. — Murlidhar Fichadia, Jan 31 '21 at 19:01

score 0 · Answer 2 · answered Jan 28 '21 at 19:24

0

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

or

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

or

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

I hope it works for you. good work.

answered Jan 28 '21 at 19:24

isarikaya

84
1
5

Okay, let me give it a try. – Murlidhar Fichadia Jan 29 '21 at 18:32
it did not work. please add light gallery in an html file and try.. – Murlidhar Fichadia Jan 31 '21 at 18:37

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

2 Answers2