Flexslider在Magnific Popup中的使用Ajax Popup

Question

我正在使用Magnific Popup（ http://dimsemenov.com/plugins/magnific-popup/ ），並希望通過Ajax打開另一個文件。 在ajax文件中，我有一個Flexslider（ http://www.woothemes.com/flexslider/ ）圖庫，其中應該顯示一些圖像。

一切正常（在hompepage上的flexslider正常加載），並且ajax彈出窗口也打開。 但是，在彈出里面的滑塊顯示不出來（我認為它不以某種方式初始化）。

JS

$(window).load(function() {
$('#home-slider').flexslider({
  //Options
});

$('#portfolio-slider').flexslider({
  //Options
});
});

HTML

<div id="portfolio-slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="img/portfolio1.png"  alt="Description" />
    </li>
    <li>
      <img src="img/portfolio2.png"  alt="Description" />
    </li>
  </ul>
</div>

我想我缺少了一些東西，但我不知道該怎么辦...

Answer 1

一個老問題，但無論如何。 由於窗口已經加載，因此需要將代碼包裝在$（document）.ready（function（）{}）;中。 並將其內聯包含在您要加載到Magnific Popup的容器中（如果有的話，否則在頁面中的某處）。 您可以使用parseAjax回調指定Magnific容器：

    $('.ajax').magnificPopup({
        type: 'ajax',
        cache: false,
        callbacks: {
            parseAjax: function(mfpResponse) {
                mfpResponse.data = $(mfpResponse.data).find('#some-element');
            }
        },
        overflowY: 'scroll',
        // More options
    });