search

fancyapps / ui

A library of JavaScript UI components, includes the best lightbox - Fancybox5
https://fancyapps.com/
Other
785 stars 98 forks source link

Unable to click on a link positioned over a Fancybox/Carousel #660

Closed hybrid897 closed 4 months ago

hybrid897 commented 4 months ago

Describe the bug

I have an absolutely positioned element with a clickable link in it that overlays a carousel slide, the carousel is inside a fancybox. When I left click the link the fancybox opens instead of going to the link. Middle clicking the link seems fine.

How can I stop fancybox from opening for clicks on my overlayed element? Thanks

image

Reproduction

https://stackblitz.com/edit/react-ts-yfbtny?file=style.css

Additional context

No response

fancyapps commented 4 months ago

Hi,

The simplest solution would be create new wrapping element around your images, example:

<div className="f-carousel__slide relative">
  <div data-fancybox="gallery"
       data-src="https://lipsum.app/id/60/1600x1200"
       data-thumb-src="https://lipsum.app/id/60/200x150">
    <img
         alt=""
         src="https://lipsum.app/id/60/400x300"
         width="400"
         height="300"
         />
  </div>
  <div className="custom-caption">Hello <a href="https://www.google.com">Test Link</a></div>
</div>