Question

我假设Magnific Popup不适用于Ajax Load More插件的原因是因为它是在错误的时间初始化的。那么如何使它与Ajax Load More一起使用？

这就是我要重新创建的https://connekthq.com/plugins/ajax-load-more/examples/advanced-custom-fields/gallery/，我相信此演示正在使用Magnific Popup，因为某些类是相同的，并且弹出窗口的样式类似于Magnific。但是我似乎找不到任何文档。

这是我的代码；

js

jQuery(document).ready(function(){
    $('.column').magnificPopup({
        delegate: 'a',
        type: 'image',
        tLoading: 'Loading image #%curr%...',
        mainClass: 'mfp-img-mobile',

        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
        },

        image: {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
            titleSrc: function(item) {
                return '<h4 class="lb-title">' + item.el.attr('title') + '</h4>' + '<p class="lb-description">' + item.el.attr('data-description') + '</p>';
            }
        }
    });
});

Ajax Load More插件中的中继器模板；

<div class="column col-md-4">
    <a href="<?php echo $image['url']; ?>">
        <div class="gal_img" style="background-image: url(<?php echo $image['url']; ?>);"></div>
    </a>
</div>

Ajax加载更多插件的简码；

[ajax_load_more acf="true" acf_post_id="11" acf_field_type="gallery" acf_field_name="gallery_image" post_type="page" transition_container="false" images_loaded="true" button_label="Load More" button_loading_label="Loading" posts_per_page="3"]

如何使Magnific Popup与Ajax Load More插件一起使用

0 个答案: