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

没有冲突或任何。

你在做什么是元素

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

结合的fancybox到列表...这样的fancybox移动的li的内容（img标签）的框。既然你有你的img标记这些属性：

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

...图像是小的fancybox。

在这一点上，所以img标签被关闭的fancybox与CSS属性display: none;后返回的fancybox正在处理的内容inline内容（即是预期的行为。）

，你所要做的就是改变你的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();