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中的项目，但我无法打开Lightbox。很明显，我在这里做错了什么。

$('.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中，它们不会在Lightbox中加载。但是，单击其中一个项目确实会将该项目加载到Lightbox中。所以这是一个问题，因为我希望灯箱在用户点击链接时打开。

另一个问题，我看到当我点击链接，我得到一个JavaScript错误。

Uncaught TypeError: Cannot read property 'parsed' of undefined 

我要试验一些，但如果你们有其他一些想法我打开听到任何和所有的选项，建议。

Answer 1

这个答案是不是100％，但它是足够接近我张贴此作为答案。剩下的问题只是前端的东西。

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

这是如何加载项目从您网站上的不同页面出现在灯箱中。它的工作原理与内嵌项目相同。

首先，你需要一个链接到你的页面上，它有你的项目，你需要应用“外部媒体”类。

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

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

这里是jquery点击函数和ajax调用。我确实需要添加这部分中的项目部分以将项目放入灯箱中。 （感谢电解金属锰对于这一点，我会奖励我的赏金你的一部分。）

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

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

如果你需要将其放置在弹出框，你可以随便去parseAjax内部之前来解析HTML，它只会显示在弹出框片段。然而，我注意到，在我的情况下，如果我试图获得HTML的片段，而不是整个片断，默认的magnific css会中断，我的内容不会自动居中。如果我抓住整个文件并插入它，而不解析HTML，默认的magnific css工作正常，一切都很好地居中。

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