Question

我有一个页面，比如专辑，只有我在这里展示的封面页，每个封面链接到包含该专辑的多个图像的单个页面，我使用大胆的弹出窗口在单个页面中显示图库中的图像，以及工作如缩进。

所以我想要实现的是，当我点击专辑封面图片时，我想打开图片库，其中包含该专辑单页的内容（现在它将重定向到单页），我知道我们必须通过Ajax执行此操作，我可以在弹出窗口中加载所有图像，但是有没有办法让弹出窗口像我们在单个页面中看到的那样，就像弹出窗口中的每个图像以及下一个和上一个按钮一样。

我现在正在使用此代码：这里'.ajax-popup-link'是Albums页面中每个图像的链接，#gallery是单页面中的包装div

<li class="item">
   <div class="item_body">                             
               <a href="http://localhost/mysite/albums/test-album/" class="ajax-popup-link">
                <img src="http://localhost/mysite/uploads/starlight.jpg" /> </a>                    
    </div>
</li>

这是单页代码

<ul class="gallery popup-gallery" id="gallery">
    <li class="item">
        <div class="item_body">          
                    <a class="" href="http://localhost/robanks/uploads/starlight_10.jpg">
                        <img src="http://localhost/mysite/uploads/2015/11/starlight.jpg" />                              
                    </a>              
        </div>
     </li>
</ul>

jQuery('.ajax-popup-link').magnificPopup({
    type: 'ajax',
    modal: true,
    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 item.el.attr('title');
        }
     },
    callbacks: {
    parseAjax: function(mfpResponse) {
            mfpResponse.data = jQuery(mfpResponse.data).find('#gallery .item');
            console.log('Ajax content loaded:', mfpResponse);
        },
        ajaxContentAdded: function() {
        $('#gallery').magnificPopup({
                        delegate: '.item a',
                        type: 'image',
                        tLoading: 'Loading image #%curr%...',
                        mainClass: 'mfp-img-mobile',
                        gallery: {
                           enabled: true
                        }
                });
            console.log(this.content);
        }
    }
});

任何帮助将不胜感激。

在Magnific Poup中加载弹出画廊

0 个答案: