Question

我正在为图库使用magnific-popup插件，我使用fonts-awesome字体中的箭头更改了默认箭头样式，但在打开图库并开始点击右/左箭头后，在特定区域弹出窗口关闭..这里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

我能够通过将 mfp-prevent-close 类添加到我的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>'

如果没有该课程，它会将自定义箭头的点击作为背景点击进行读取 - 这就是DigitalDouble禁用后台点击以关闭图库的解决方案的原因。你会注意到即使画廊关闭，它也会短暂地显示下一张图片。所以导航仍然正常工作，它只是关闭了画廊的额外动作：）

Answer 2

尝试在配置中添加：

closeOnBgClick: false

单击箭头（右/左）时关闭Magnific-popup

2 个答案: