CODEWITHSUNDEEP
jquerycssmagnific-popup
user3003810
user3003810

Reputation: 961

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

I'm using 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 demo

$('.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');
                }
            }
        });

Upvotes: 0

Views: 2067

Answers (2)

Pandy
Pandy

Reputation: 455

I was able to resolve this by adding the mfp-prevent-close class to my FontAwesome icon.

So, your arrowMarkup setting in the gallery would be:

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>'

Without the class, it reads the custom arrow's click as a background click - which is why DigitalDouble's solution of disabling background clicks to close the gallery worked. You'll notice that even when the gallery was closing, it briefly showed the next image. So the navigation was still working properly, it just had the extra action of closing the gallery too :)

Upvotes: 3

DigitalDouble
DigitalDouble

Reputation: 1768

Try adding this in the configuration:

closeOnBgClick: false

Upvotes: 1

Related Questions