Question

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

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

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

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

如果您访问项目模板，您将看到工作样本的轮播。但是如果单击一个带有.external-media类的链接，jquery应该接管并将该页面中的项加载到magnific popup中。

我有以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

我在你的剧本中看不到项目。

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

$('.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 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放入弹出框之前解析HTML，您可以进入parseAjax并且它只会在弹出框中显示该片段。我确实注意到，在我的情况下，如果我试图获取HTML的片段而不是整个片段，默认的宏观css会破坏，我的内容不会自动居中。如果我抓住整个文件并插入它而不解析HTML，默认的magnific css工作正常，一切都很好地居中。

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

Answer 4

这个答案不是100％，但它足以让我发布这个答案。剩下的问题只是前端问题。

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

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

首先，您需要一个链接到您的页面，其中包含您的项目，您需要应用＆＃34;外部媒体＆＃34;类。

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

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

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

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

4 个答案: