Prevent clicking on the ".lg-img-wrap" element within Light Gallery

Is there a way to disable clicking on .lg-img-wrap?

I have attempted various solutions, but none seem to work with lightgallery.

Attempt 1

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

Attempt 2

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

Attempt 3

pointer-events:none //added to a CSS property

I want to prevent the light gallery from closing when the user clicks outside of the image.

A black margin is visible when the image ratio does not match the screen size. Please refer to the image below for clarification. https://i.sstatic.net/YHHxg.png

The light gallery I am using can be found at: https://github.com/sachinchoolur/lightGallery

Answer №1

Make sure to include the closeable: false option in your lightGallery setup. You can find more information about this feature in lightGallery's API documentation.

If you want to see a demo of this in action, check out this Codepen example.

<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>



Answer №2

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

or

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

or

$('.lg-img-wrap"').click(function(){return false;});

I hope these solutions prove to be effective for your needs. Keep up the good work!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When choosing from multiple dropdown menus, the selected option should be hidden from the other dropdowns

I'm currently working on a project that involves designing a web form incorporating 3 select boxes with multiple questions. The concept is such that, if I choose the 1st Question from the 1st select drop-down, it should not be available in the 2nd sel ...

Customize the background color of a popup modal except for one element

After much searching without finding a solution, I am reaching out here for help. Whenever I click on a Bootstrap modal, a popup appears with a background color and CSS applied. My issue is that I want to prevent the Bootstrap modal from applying the backg ...

Can we limit the number of items to just two per row in a grid with two columns?

I'm currently facing issues with aligning items within a two-column grid. When looking at this image, you'll notice that the alignment is off. Specifically, 'Example 3' does not align properly with 'Example 4'. This seems to b ...

Tips for positioning two bootstrap cards alongside each other

I am trying to align two cards next to each other horizontally, but they are currently stacked vertically. I want Heading 1 card to be positioned beside the Heading 2 card, even though I have applied some margin it seems to only shift them horizontally a ...

The elegant-admin template's mobile navigation toggle is missing

I recently downloaded an admin theme and added the CSS to my Django static files. However, after doing so, the mobile toggle feature disappeared. I double-checked all the CSS and JS links in the index template, and they are correctly linked to the paths, b ...

Maintaining aspect ratio while keeping images the same height and responsive

I have encountered a challenging issue that remains unresolved despite my extensive search for an answer. I have not found a solution in the "Questions that may already have your answer" section, nor have I discovered one elsewhere on the web. Here is the ...

The JavaScript linked list causes the program to come to a halt

I am currently working on developing a simple web page embedded program using JavaScript. One of the tasks I am tackling involves creating a linked list of all active buttons displayed on the screen at any given time. However, I have encountered an issue w ...

The navigation bar is not displaying properly due to the PHP echo command

Struggling with an unfamiliar problem here. Everything functions well when using regular HTML code, but the navigation bar appears abnormal when utilizing a php-echo. The desired look of the bar (with normal HTML CODE): However, with php-echo it resembl ...

Tips for resolving a sluggish webpage with database content

I am facing an issue with one specific page on my website that contains links to the database. The loading speed of this page is extremely slow and I'm looking for ways to speed it up. I have noticed that even when there are no visitors on the server ...

Tips for aligning Picture boxes using CSS

As a newbie, I recently received training in HTML, CSS, and a bit of JavaScript. Currently, I am involved in a project where I display the latest news from an API. The technical aspects of fetching data from the API using JavaScript are handled by a senior ...

Can anyone explain why I am having trouble loading JavaScript files into a different HTML file?

Currently, I am developing an electron application. In my index.html file, I have successfully loaded JavaScript files in the head tag and can access the JS functions without any problems. Now, I have created a separate browser window with another HTML fi ...

Setting up a website on a virtual box running Ubuntu and hosting it with a GoDaddy

I'm in need of assistance to get my website live with my GoDaddy domain. Here's what I've done so far, and any advice or correction is greatly welcomed. So here's the rundown: -I downloaded VirtualBox and Ubuntu Desktop (should it hav ...

100% height checkbox div covering the entire body

I'm struggling to limit the height of a div containing multiple checkboxes so that it doesn't exceed 100% of the window's height. I've tried numerous solutions but haven't found one that works. If anyone has any tips or tricks to h ...

I'm having trouble displaying the X's and O's in my tic tac toe JavaScript game. Any suggestions on how to resolve this issue?

After following a couple of online tutorials for the tic tac toe project, I encountered an error in both attempts. The X's and O's were not displaying even though all other features were working fine. Below are my codes for HTML, CSS, and JavaScr ...

Welcome to the interactive homepage featuring multitouch authentication

I am looking to design a homepage that is interactive based on touch input. For instance, if the user uses 5 fingers to touch the screen, similar to the green circles in the image below, they will be redirected to a specific homepage. If they touch in a di ...

"The JQuery .validate method is not compatible with this property or method" - error message displayed

I seem to be facing a problem that I can't seem to solve. I keep getting an error message that says "Object doesn't support this property or method" while using jquery-1.10.4. The .validate method is not functioning properly for me. Any assistanc ...

The validation process is still failing even though the correct credentials have been entered

I'm diving into the world of Javascript and DOM today, but I've hit a roadblock. Can you take a look at this code snippet and help me figure out what's causing me to always end up in the else block, no matter what I input in the text field? ...

Deletion of a custom function in JavaScript

I have written some basic code to generate and remove an image using functions. Specifically, I need help with removing the image created by the function Generate() when a button linked to the function Reset1() is clicked. Here's the code snippet for ...

Are there any CSS attribute configurations that I am overlooking?

Reviewing a colleague's CSS file, I stumbled upon an interesting section. They are a skilled CSS designer, so before jumping to conclusions, I wanted to make sure I am not missing something. In the code snippet below, it seems like they are unintenti ...

JavaScript can sometimes present peculiar challenges when it comes to setting style attributes, especially when a DOCTYPE is

It seems like I am encountering an issue when trying to dynamically create and modify a <div> element using JavaScript. The problem arises when I use the XHTML 1 Transitional doctype. This is how I am generating the <div>: var newDiv = docume ...