With Magnific Popup, next/prev buttons trigger pop up

It seem's that Magnific targets an element lower on the tree than Flybox is. FlyBox target's the anchor tag immediately below ".slide__media" elements. While Magnific Popup is targeting the parent ".splide" element. That might be somewhat on me, because I added a style that set's a max width, and uses "margin: 0 auto;" to center that.

I thought it might because I had the margins to overlap the buttons, but I moved that to the parent element, and I get the same result. So somehow a click event on the buttons propagates to the individual image element. In any case, I don't think that event listener is supposed to be on the ".splide" element.

Thank you.

I haven't been able to see to it, just FYI, Blazy does not require Magnific popup module to be installed, only its library is needed.

See /admin/help/blazy_ui > LIGHTBOXES section.

Not sure if related or conflicts, try uninstalling the Magnific module, and see if persistent.

Moving it to Blazy.

I just have time to see to it.

Looks like the issue is persistent for both Slick and Splide, not just Splide.
I have tried to check anything to do with Blazy MFP initializer, but no joy, so far.

It might be Blazy or the library, not sure.

We need to isolate the BLAZY MFP to the very basic construct with just LINK element via delegate option.
Currently it uses items object collection which appears to confuse MFP.

Feel free to debug the latest DEV file here:
https://git.drupalcode.org/project/blazy/-/blob/3.0.x/js/src/components/...
https://git.drupalcode.org/project/blazy/-/blob/3.0.x/js/components/jque...

Copy the non-minified content to the minified one, and start with the very basic construct as mentioned above.

I extend my debug.

The basic is indeed fine:

jQuery(box).magnificPopup({
     delegate: S_TRIGGER,
      type: 'image',
      gallery: {
        enabled: true
      }
    });

After I changed delegate to items, the issue appears:

jQuery(box).magnificPopup({
      // delegate: S_TRIGGER,
      items: [
        {
          src: '/sites/default/files/2023-07/7umxppkjd1k-paul-itkin.jpg'
        },
        {
          src: 'https://www.youtube.com/watch?v=SlPhMPnQ58k',
          type: 'iframe' // this overrides default type
        },
        {
          src: '/sites/default/files/2021-04/as-build-Screenshot%20from%202021-02-18%2012-48-08.png',
          type: 'inline'
        },
        {
          src: '<div>HTML string</div>',
          type: 'inline'
        },
        {
          src: '/sites/default/files/2021-04/generateImage_bLt9oz.jpg', // CSS selector of an element on page that should be used as a popup
          type: 'inline'
        }
      ],
      type: 'image',
      gallery: {
        enabled: true
      }
    });

Both are the very basic construct like in the demo:
https://dimsemenov.com/plugins/magnific-popup/documentation.html

As suspected at #4, it might get confused for losing a correct selector when given items.
Unfortunately items and delegate can not coexist without errors.

Conclusion: the library issue with items in sliders.

Try searching at github with keys: slider or carousel.
I haven't been able to get what I was looking for.

There is an option elementParse, we can move items into it.
A bit round trip, but the only way to support non plain img or any HTML like Picture/Responsive image, SVG, Video, Remote video, Pinterest, Twitter, Instagram, etc.

Almost similar approach to PhotoSwipe seen at Blazy PhotoSwipe with the same authors.

Not bug, just a workaround to the library limitation with items construct.
Thank you for contribution.

Automatically closed - issue fixed for 2 weeks with no activity.