jquery - 单击箭头(右/左)时关闭 Magnific-popup

Question

我正在使用 magnific-popup gallery 插件，我使用 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 禁用背景点击以关闭画廊的解决方案起作用的原因。您会注意到，即使在画廊关闭时，它也会短暂地显示下一张图片。所以导航仍然正常工作，它只是有关闭画廊的额外操作:)