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

Question

这是我想要做的。我正在尝试使我网站上的画廊更具便携性，这样我就可以为我的项目页面生成一个 link，然后让 Magnific Popup 将该页面的内容显示到滑块中。

如果此页面上的所有元素都可能内联隐藏，我想像这样工作，但我无法内联加载这些项目，我必须从外部页面获取它们。

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

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

如果您访问项目模板，您将看到工作示例轮播。但是，如果单击带有 class .external-media 的 link，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);
    }
  }
});

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

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

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

===

由于你们中的一些人提供了一些想法，我现在正在探索其他一些选项。这是我得到的，但它似乎不起作用。我认为现在这是一个半解决方案。我有一个点击功能，可以从 permalink 页面获取内容并将其加载到当前页面模板的 div 中。单击 link 后，我可以在内容 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 中，它们没有加载到灯箱中。但是，单击其中一项会将该项目加载到灯箱中。所以这是一个问题，因为我希望灯箱在用户单击 link.

时立即打开

我在单击 link 时看到的另一个问题是 javascript 错误。

Uncaught TypeError: Cannot read property 'parsed' of undefined

我将进行更多实验，但如果你们有其他想法，我愿意听取任何和所有的选择、建议。

Answer 1

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

 $('.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 2

这个答案不是 100%，但对我来说已经足够接近 post 这个答案了。剩下的问题只是前端的东西。

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

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

首先，您需要一个 link 进入包含您的项目的页面，并且您需要应用 "external-media" class.

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

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

这里是 jquery 点击函数和 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 代码，使其响应并匹配我在网站其他部分的其他灯箱。

Answer 3

$('.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 4

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

我用的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');
         }
     }

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

Magnific Popup - Loading content from external page and put it in the slideshow

ajax

jquery

magnific-popup