You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 :(
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:
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.
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).
The text was updated successfully, but these errors were encountered: