FlexSlider и Fancybox

Я попытаюсь создать слайдер с помощью FlexSlider, изображения в слайдере должны просматриваться «по щелчку» с помощью 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 выглядит так:

<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? У кого-нибудь есть решение?

Спасибо ;)


php jquery fancybox flexslider
person Shao Khan    schedule 09.01.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Нет никакого конфликта или чего-то еще.

Что вы делаете, так это привязываете fancybox к элементу list

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

... поэтому fancybox перемещает содержимое li (тег img) в поле. Поскольку у вас есть эти свойства в теге img:

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

... изображение маленькое в fancybox.

На данный момент fancybox обрабатывает содержимое как содержимое inline, поэтому тег img возвращается после закрытия fancybox со свойством css 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();
person JFK    schedule 09.01.2013