Magnific Popup - 从外部页面加载内容并将其放入幻灯片中

Question

这就是我想要做的。我正在尝试使我在我的网站上拥有的画廊更便携，以便我可以生成指向我的项目页面的链接，然后让 Magnific Popup 将该页面中的内容显示到滑块中。

如果所有元素都在此页面上，我希望像这样工作

让我们看一些代码，首先，我有一个链接到项目页面的文本链接：

<a href="http://domain.com/projects/my-project-template/" class="external-media">View Project</a>

如果您访问项目模板，您将看到工作示例的轮播。但是，如果单击带有类 .external-media 的链接，jquery 应该接管并将此页面中的项目加载到宏伟的弹出窗口中。

我有 html 格式的数据输出，我也尝试过 json。 html结构如下：

<div id="gallery">
<a href="photo1.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal"><img src="/thumbnail1.jpg" alt="" class="standard-image"></a>
<a href="photo2.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal"><img src="/thumbnail2.jpg" alt="" class="standard-image"></a>
<a href="photo3.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal"><img src="/thumbnail3.jpg" alt="" class="standard-image"></a>
<a href="photo4.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal"><img src="/thumbnail4.jpg" alt="" class="standard-image"></a>
</div>

然后我的 javascript 看起来像这样，我试图使用 ajax 类型。

jQuery('.external-media').magnificPopup({
  type: 'ajax',
  modal: false,
  gallery: {
    enabled: true,
    navigateByImgClick: true,
    preload: [0,1]
  },
  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');
    console.log('Ajax content loaded:', mfpResponse);
  },
  ajaxContentAdded: function() {                            
    $('#gallery').magnificPopup({
      type: 'image',
      delegate: 'a',
      gallery: {
                enabled: true,
                tPrev: 'previous',
                tNext: 'next',
                tCounter: '%curr% of %total%'
      },
      image: {
       verticalFit: true,
       titleSrc: function (item) {
       return item.el.attr('title') + ' &middot; <a class="image-source-link" href="' + item.src + '" target="_blank"><i class="fa fa-file-image-o"></i> open original</a>';
          }
        },
    });
    console.log(this.content);
    }
  }
});

现在当我单击文本链接时会发生什么，它会在灯箱中显示堆叠在每个顶部的所有 4 个图像。我想用左右箭头在幻灯片中一次显示一个。

基本上，如果所有元素都在同一个页面上，它看起来完全一样。

有人知道如何从外部来源加载图像并在幻灯片中填充灯箱吗？

===

我现在正在探索其他一些选择，因为你们中的一些人提出了一些想法。这是我得到的，但它似乎不起作用。我认为它现在是一个半解决方案。我有一个点击功能，可以从永久链接页面中获取内容并将其加载到当前页面模板上的 div 中。单击链接后，我可以看到内容 div 中的项目，但无法打开灯箱。显然我在这里做错了什么。

$('.external-media').click(function( event ) {

    event.preventDefault();

    var href = jQuery(this).attr('href') + ' #gallery';
    var items = [];

    $.ajax({
            url: href,
            type:'GET',
            success: function(data){
                         $('#content').html(
                            $(data).find('.slide').each(function() {
                             items.push({
                                 src: $(this)
                                });
                         })
                    );
            }
    });

    $.magnificPopup.open({
        type: 'inline',
        gallery: {
                enabled: true,
                tPrev: 'previous',
                tNext: 'next',
                tCounter: '%curr% of %total%'
        }
    }); // close mpopup

}); // close click

当我单击此功能时，我看到了两件事。我看到项目出现在 div 中，它们没有加载到灯箱中。但是，单击其中一个项目会将该项目加载到灯箱中。所以这是一个问题，因为我希望在用户单击链接时打开灯箱。

当我单击链接时看到的另一个问题是出现 javascript 错误。

Uncaught TypeError: Cannot read property 'parsed' of undefined

我将尝试更多，但如果你们有其他想法，我愿意听取任何和所有选项和建议。

Answer 1

$('.external-media').click(function( event ) {
    event.preventDefault();
    var items = [];
    $.ajax({
            url: jQuery(this).attr('href'),
            type:'GET',
            success: function(data){
                $(data).find('.slide').each(function() {
                    items.push({
                        src: $(this).attr("src"),
                        title: $(this).attr("alt")
                    });
                });
            },
            complete: function() {
              $.magnificPopup.open({
                items: items,
                type: 'image',
                gallery: { enabled: true }
            });
         }
    });    
});

Answer 2

我没有看到项目：在你的脚本中。

 $('.open-gallery-link').click(function() {
 /*an items array that will get passed to the popup*/
 var items = [];
 $( $(this).attr('href') ).find('.slide').each(function() {
   items.push( {
     src: $(this) 
    } );
  });

 $.magnificPopup.open({
   items:items,
   gallery: {
      enabled: true 
    }
  });
});

对于多个实例：

 $('.first-popup-link, .second-popup-link').magnificPopup({
    closeBtnInside:true
  });

many more examples are here

Answer 3

我个人也遇到过这个问题，但我不得不从多个外部页面加载我的所有内容，而不是从一个外部页面加载。

我使用的 HTML

    <a href="ajax.html" class="ajax-popup-link">Click me for popup 1</a>
    <a href="ajax-1.html" class="ajax-popup-link">Click me for popup 2</a>
    <a href="ajax-2.html" class="ajax-popup-link">Click me for popup 3</a>

然后对于 javascript，我使用 Magnific 已经拥有的内置方法。

     $('.ajax-popup-link').magnificPopup({
    type: 'ajax',
    gallery: {
        // options for gallery
        enabled: true
    },
    ajax: {
        settings: null, // Ajax settings object that will extend default one - http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
        // For example:
        // settings: {cache:false, async:false}

        cursor: 'mfp-ajax-cur', // CSS class that will be added to body during the loading (adds "progress" cursor)
        tError: '<a href="%url%">The content</a> could not be loaded.' //  Error message, can contain %curr% and %total% tags if gallery is enabled
    },

    callbacks: {
        parseAjax: function(mfpResponse) {
            // mfpResponse.data is a "data" object from ajax "success" callback
            // for simple HTML file, it will be just String
            // You may modify it to change contents of the popup
            // For example, to show just #some-element:
            // mfpResponse.data = $(mfpResponse.data).find('#some-element');

            // mfpResponse.data must be a String or a DOM (jQuery) element

            console.log('Ajax content loaded:', mfpResponse);
        },
        ajaxContentAdded: function() {
            // Ajax content is loaded and appended to DOM
            console.log(this.content);
        }
    }
});

如果您需要在将 HTML 放入弹出框中之前对其进行解析，您可以直接进入 parseAjax，它只会在弹出框中显示该片段。但是，我确实注意到，如果我尝试获取 HTML 的片段而不是整个片段，则默认的 magnific css 会中断，并且我的内容不会自动居中。如果我抓取整个文件并在不解析 HTML 的情况下将其插入，则默认的 magnific css 可以正常工作，并且所有内容都很好地居中。

     callback: {
         parseAjax: function(mfpResponse) {
             mfpResponse.data = $(mfpResponse.data).find('#some-element');
         }
     }

Answer 4

这个答案不是 100%，但它足以让我将其发布为答案。剩下的问题只是前端的东西。

使用此代码，我可以从其他页面获取项目以加载到轮播中，但是，环绕项目的 html 标记不正确。我还在做那部分工作。我认为这非常接近，我想分享它，以便其他人也可以看到如何完成类似的事情。

这是您从网站的不同页面加载项目以显示在灯箱中的方式。它的工作方式与内联项目相同。

首先，您需要一个指向包含您的项目的页面的链接，并且您需要应用“外部媒体”类。

<a href="{permalink}" class="external-media">External Media Link</a>
<div id="content"></div>

然后，我使用 ajax 从 id="gallery" 的 div 中获取这些项目。我正在将内容加载到链接所在页面上 id="content" 的 div 中。

这里是jquery click 函数和ajax 调用。我确实需要在这部分添加项目部分以将项目放入灯箱。 （感谢 Emm，我会为这部分奖励你。）

$('.external-media').click(function( event ) {

    event.preventDefault();

    var href = jQuery(this).attr('href') + ' #gallery';
    var items = [];

    $.ajax({
            url: href,
            type:'GET',
            success: function(data){
              $('#content').html(
                $(data).find('.slide').each(function() {
                  items.push({
                    src: $(this)
                  });
                })
              );
            },
            complete: function() {
              $.magnificPopup.open({
                items: items,
                type: 'inline',
                image: {
                 markup: '<div class="mfp-figure">'+
                 '<div class="mfp-close"></div>'+
                 '<div class="mfp-img"></div>'+
                 '<div class="mfp-bottom-bar">'+
                 '<div class="mfp-title"></div>'+
                 '<div class="mfp-counter"></div>'+
                 '</div>'+
                 '</div>',
                },
                gallery: { enabled: true }
            }); // close mpopup
         }
    });    
});

最后一点是修改包装灯箱中的项目的 html 代码，使其具有响应性并匹配我在网站其他部分的其他灯箱。