Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ability to ignore child element clicks from opening gallery #1613

Open
WesleyKapow opened this issue Mar 28, 2024 · 1 comment · May be fixed by #1614
Open

Ability to ignore child element clicks from opening gallery #1613

WesleyKapow opened this issue Mar 28, 2024 · 1 comment · May be fixed by #1614

Comments

@WesleyKapow
Copy link

Summary

Galleries may often include helpful icons/actions on top of the image itself. Right now, clicking on such icons will trigger the click handler of the item and open the gallery. It'd be helpful if there could be sometype of data-lg-ignore or some other way to signal that clicking this element should not trigger the gallery to open. Yes this is possible with dynamic mode but dynamic mode comes at a cost (no zoom from origin!).

Basic example

Notice clicking on the red ICON section still opens the gallery :(

https://stackblitz.com/edit/lightgallery-react-kejjdx?file=index.tsx

Motivation

Allow designers to overlay icons/actions on to the images without triggering the gallery (e.g. a delete icon, or a copy icon, or a share icon, etc).
@WesleyKapow WesleyKapow linked a pull request Mar 28, 2024 that will close this issue
Open
@bytesandbots3
Copy link
Contributor

bytesandbots3 commented Apr 25, 2024 •
edited

Hey @WesleyKapow , You can achieve this by changing the HTML structure slightly. Instead of placing the icon directly within the tag, you can place it outside of it but still within the parent

This way, clicking on the icon won't trigger the click handler of the tag and won't open the gallery. Here's how you can modify the structure:

<div>
  <div className="icon">ICON</div>
  <a
    data-lg-size="1406-1390"
    className="gallery-item"
    data-src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1406&q=80"
    data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@entrycube' >Diego Guzmán </a></h4> <p> Location - <a href='https://unsplash.com/s/photos/fushimi-inari-taisha-shrine-senbontorii%2C-68%E7%95%AA%E5%9C%B0-fukakusa-yabunouchicho%2C-fushimi-ward%2C-kyoto%2C-japan'>Fushimi Ward, Kyoto, Japan</a></p>"
  >
  
    <img
      className="img-responsive"
      src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80"
    />
  </a>
</div>

By placing the icon outside the tag but still within the parent

, clicking on the icon won't propagate the click event to the tag and thus won't trigger the gallery. This allows you to overlay icons/actions on top of the images without opening the gallery.

Selector for LightGallery should "a"  :  <LightGallery  selector="a">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Ignore click events on data-lg-ignore elements WesleyKapow/lightGallery
2 participants
@WesleyKapow @bytesandbots3