Ability to ignore child element clicks from opening gallery

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

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

stale[bot] commented 4 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

sachinchoolur / lightGallery