Magnific-Popup Gallery don't open twice

user_7158582 0
Viewed 708

I would like to open a magnific popup gallery from a list of thumbnails.

The gallery open one time and everything works great, but if I close the gallery, I can't open twice and I have this error :

Uncaught TypeError: Cannot read property 'top' of undefined

The error report to this line in magnific-popup.js : offset.top -= ( $(window).scrollTop() - paddingTop );

<div id="filelist">
    <div id="156" class="entreprise_img" style="background: url('5c30ff09d7566.jpg') no-repeat center;-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;">
        <a href="#" class="entreprise_photo_btn_delete" title="Supprimer">Supprimer</a>
        <a href="5c30ff09d7566.jpg" class="magnific-gallery" style="position: absolute; bottom: 0;">VOIR</a>
    </div>
    <div id="157" class="entreprise_img" style="background: url('5c3104cab1fb7.jpg') no-repeat center;-moz-background-size: cover;-webkit-background-size: cover;background-size: cover;">
        <a href="#" class="entreprise_photo_btn_delete" title="Supprimer">Supprimer</a>
        <a href="5c3104cab1fb7.jpg" class="magnific-gallery" style="position: absolute; bottom: 0;">VOIR</a>
    </div>
</div>


$('#filelist').each(function(){
    $(this).magnificPopup({
        delegate: '.magnific-gallery',
        type: 'image',
        closeOnContentClick: false,
        closeBtnInside: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile',
        image: {
            verticalFit: true
        },
        gallery: {
            enabled: true
        },
        zoom: {
            enabled: true,
            duration: 300, // don't foget to change the duration also in CSS
            opener: function(element) {
                return element.find('img');
            }
        }   
    });
});
magnific-popup gallery lightbox jquery
1 Answers

I had a similar error too. The solution is quite simple: you need to rewrite the opener method in the zoom property so that it checks if the object being opened is an image.

zoom: {
        enabled: true,
        duration: 300,
        opener: function (element) {
                return element.is('img') ? element : element.find('img');
        }
    }
user_133397340
Related