FlexSlider和Fancybox [英] FlexSlider and Fancybox

问题描述

我将尝试使用FlexSlider构建滑块 滑块中的图像应通过Fancybox进行"onclick"查看.

i'll try to build a slider with FlexSlider the images in the slider should be viewed 'onclick' with Fancybox.

我现在的代码:

$(".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看起来像这样:

the HTML / PHP looks like this:

<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之间是否存在任何已知问题? 任何人都有解决方案吗?

If i click on a image, it where displayed as an small picture and it disappears from my gallery list. Are there any issues known between Flexslider and Fancybox ? Anyone has a solution ?

谢谢;)

推荐答案

没有冲突或任何冲突.

There is not conflict or whatsoever.

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

What you are doing is binding fancybox to the list element

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

...因此，fancybox将li(img标记)的内容移动到该框中.由于您在img标记中具有以下属性:

...so fancybox moves the content of li (the img tag) to the box. Since you have these properties in your img tag:

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

...图像在fancybox中很小.

... the image is small in fancybox.

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

At this point, fancybox is handling the content as inline content so the img tag is returned after closing fancybox with the css property display: none; (that is the expected behavior.)

您需要做的就是更改PHP的这一部分，并添加一个a标记以将要在fancybox中打开的图像定位为目标，例如:

What you have to do is to change this part of your php and add an a tag to target the image to be opened in fancybox like :

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标记，例如:

... notice that we moved the class="fancybox" from the img tag to the a tag. Then bind fancybox to that a tag in your script like :

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

或更好

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

或更简单，更好

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

这篇关于FlexSlider和Fancybox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！