Flexslider 在 Fancybox 2 ajax 窗口中不起作用答案

【问题标题】：Flexslider isn't working within a Fancybox 2 ajax windowFlexslider 在 Fancybox 2 ajax 窗口中不起作用
【发布时间】：2012-12-24 22:10:14
【问题描述】：

您好遇到了以下问题。我尝试在 Fancybox v.2.1.3 ajax 窗口中使用 Flexslider v.2.1。 ajax 窗口弹出，但显示的三个图像缺少方向导航图标，并且根本无法浏览图像。

相关的 html 位如下所示：

<ul class="moodlegrid sectionwrap">
            <li><a class="ajax1" href="projekt1.html"><img title="Projekte1" src="img/projekteblur.jpg" alt="Projekte1" /><img title="Projekte1" src="img/projekte.jpg" alt="Projekte1" /><span class="spiceup">Zum Projekt</span></a></li>
        </ul>

在 index.html 页面的底部，jQuery 部分如下所示：

<script type='text/javascript' src="./js/jquery-1.8.3.min.js"></script>
<script type='text/javascript' src="./js/jquery.fancybox.js"></script>
<script type='text/javascript' src="./js/jquery.flexslider-2.1.min.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
    $(".ajax1").fancybox({
        type: 'ajax',
        fitToView   : false,
        openOpacity : false,
        width       : '70%',
        height      : '97%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        afterLoad: function() {
            $('.flexslider').flexslider({
                animation: "slide",
                animationLoop: true,
                controlNav: false,
                directionNav: true,
                slideshow: false
            });}        
    });
});

加载到 ajax 窗口中的 html 的 Flexslider 相关部分如下所示：

<div class="flexslider">
    <ul class="slides">
        <li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px'/></li>
        <li><img src="img/projekte.JPG" alt='Bild' width='530px' height='307px' /></li>
        <li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px' /></li>
    </ul>
</div>

在控制台内部根本没有任何错误。如果有人知道如何解决该问题，那就太好了。在此先感谢 r。

【问题讨论】：

标签： jquery fancybox fancybox-2 flexslider

【解决方案1】：

我刚刚遇到了同样的问题。问题是需要在加载 ajax 之后重新加载 dom，然后才能触发 flexslider。

我是一名前端开发人员，所以为了简单和快速，我将 flexslider 调用放在 ajax 负载中。像这样：

<div class="flexslider">
    <ul class="slides">
        <li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px'/></li>
        <li><img src="img/projekte.JPG" alt='Bild' width='530px' height='307px' /></li>
        <li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px' /></li>
    </ul>
</div>

$("flexslider ul.slides").flexslider();

这对我有用..

【讨论】：

抱歉迟到了。但是“将 flexslider 调用放入 ajax 负载”是什么意思？在ajax模态窗口内加载的html文件的末尾放置另一个脚本标签并在那里加载flexslider？
我必须承认这不是最漂亮的解决方案，但它确实有效。加载新内容后必须（重新）触发 flexslider。