0

我会尝试用 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 之间是否存在已知问题？有人有解决方案吗？

谢谢 ;）

4

1 回答 1

1

没有冲突或任何东西。

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

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

...所以 fancybox 将li（img标签）的内容移动到盒子中。由于您的img标签中有这些属性：

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

...图片在fancybox中很小。

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

您需要做的是更改 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();
于 2013-01-09T22:46:14.937 回答