Question

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

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

Flexificlider在Magnific Popup Ajax Popup中

1 个答案: