单击箭头时 Magnific-popup 关闭 (right/left)

Question

我正在使用 magnific-popup plugin for gallery, and I changed the default arrows style using arrows from fonts-awesome font, but after open the gallery and start clicking on right/left arrows, in specific area the popup closed .. here jsfiddle 演示版

$('.related-gallery').magnificPopup({
            type: 'image',
            gallery:{
                enabled:true,
                arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow custom-mfp-arrow-%dir%"><i class="fa fa-angle-%dir% fa-4x"></i></button>'
            },
            zoom: {
                enabled: true, // By default it's false, so don't forget to enable it

                duration: 300, // duration of the effect, in milliseconds
                easing: 'ease-in-out', // CSS transition easing function 

                // The "opener" function should return the element from which popup will be zoomed in
                // and to which popup will be scaled down
                // By defailt it looks for an image tag:
                opener: function(openerElement) {
                  // openerElement is the element on which popup was initialized, in this case its <a> tag
                  // you don't need to add "opener" option if this code matches your needs, it's defailt one.
                  return openerElement.is('img') ? openerElement : openerElement.find('img');
                }
            }
        });

Answer 1

尝试在配置中添加：

closeOnBgClick: false

Answer 2

我可以通过将 mfp-prevent-close class 添加到我的 FontAwesome 图标来解决这个问题。

因此，您在图库中的 arrowMarkup 设置为：

arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow custom-mfp-arrow-%dir%"><i class="fa fa-angle-%dir% fa-4x mfp-prevent-close"></i></button>'

在没有 class 的情况下，它会将自定义箭头的点击读取为后台点击 - 这就是 DigitalDouble 禁用后台点击以关闭图库的解决方案起作用的原因。您会注意到，即使在画廊关闭时，它也会短暂显示下一张图片。所以导航仍然正常工作，它只是有关闭画廊的额外操作:)

单击箭头时 Magnific-popup 关闭 (right/left)

Magnific-popup closed when I click on arrows (right/left)

css

jquery

magnific-popup