FlexSlider和Fancybox

Question

我将尝试用FlexSlider建立一个滑块，滑块中的图像应该是用Fancybox 'onclick‘查看的。

我现在的代码是：

$(".slides li").fancybox();

$('#flex1').flexslider({
   animation: "slide",
   animationLoop: false,
   itemWidth: 179,
   itemMargin: 0,
   minItems: 4,
   maxItems: 4,
   controlNav: false, 
   pauseOnHover: true,
   slideshowSpeed: 5000,
   keyboardNav: true,
   slideshow: false,
});

在文档中就绪

HTML / PHP如下所示：

<div class="flexslider" id="flex1">
    <ul class="slides home_single_item">
       <?php 
            $handle=opendir ("pics/");
            $i=0;
            while ($datei = readdir ($handle)) {
                $i++;
                if($datei != "." && $datei != ".."){
                    echo '<li>';
                    echo '<img class="fancybox" src="pics/'.$datei.'" width="179px" height="224px" />';
                    echo '</li>';
                }
            }

            closedir($handle);
        ?>
    </ul>
</div>

如果我点击一张图片，它就会以一张小图片的形式出现，并从我的图片库列表中消失。Flexslider和Fancybox之间有什么已知的问题吗？有谁有解决方案吗？

谢谢;)

Answer 1

没有冲突或其他任何东西。

您正在做的是将fancybox绑定到列表元素

$(".slides li").fancybox();

...so fancybox将li ( img标记)的内容移动到框中。由于您的img标记中包含以下属性：

width="179px" height="224px"

..。fancybox中的图像很小。

此时，fancybox正在将内容作为inline内容处理，因此在使用css属性display: none;关闭fancybox之后，将返回img标记(这是预期的行为)。

你要做的是改变你的php的这一部分，并添加一个a标签来定位要在fancybox中打开的图像，如下所示：

if($datei != "." && $datei != ".."){
    echo '<li>';
    echo '<a href="pics/'.$datei.'" class="fancybox">';
    echo '<img src="pics/'.$datei.'" width="179px" height="224px" />';
    echo '</a>';
    echo '</li>';
}

... 注意，我们将class="fancybox"从img标记移到了a标记。然后将fancybox绑定到脚本中的a标记，如下所示：

$(".slides a").fancybox();

或者更好

$(".slides a.fancybox").fancybox();

或者更简单更好

$("a.fancybox").fancybox();