Magnific Popup Ajax Popup 中的 Flexslider

Question

我正在使用 Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/) 并希望通过 Ajax 打开另一个文件。在 ajax 文件中，我有一个 Flexslider (http://www.woothemes.com/flexslider/) Gallery，它应该显示一些图像。

一切正常（主页上的 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
    });