FlexSlider and Fancybox

Question

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

my code for now:

$(".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,
});

in document ready

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>

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 ?

Thanks ;)

Answer 1

There is not conflict or whatsoever.

What you are doing is binding fancybox to the list element

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

...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"

... the image is small in fancybox.

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.)

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>';
}

... 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();

or better

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

or much simpler and better

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