Integrating fancybox into galleriffic

Question

I would like to integrate some of fancybox's features into galleriffic. Basically I want to have a gallery of images with their respective thumbnails using galleriffic. Besides the styles my approach looks very similar to: http://www.twospy.com/galleriffic/example-2.html Additionally, I want to be able to zoom into the image being shown. For such prupose I am using fancybox. An example of its behaviour can be found here http://fancyapps.com/fancybox/demo/

I have managed to make what I described above slightly modifying the galleriffic buildImage function leaving it as follows:

.append('<span class="image-wrapper current"><a class="advance-link fancybox" rel="group" href="'+imageData.image.src+'" title="'+imageData.title+'">&nbsp;</a></span>')

Now, galleriffic adds the fancybox class fancybox needs as well as the image source. This works wonderfully.

At this point I find a problem I don't seem to find a neat solution for. Fancybox allows to navigate through a collection of images by clicking on the right/left side of each image to go to the next/previous image in the collection (as you may have noticed in the demo provided above). I would like to make use of this feature as well, so that users can navigate through the gallery by navigating through galleriffic's thumbnails, as well as through a zoomed version of the images using fancybox.

The problem I find here is that galleriffic creates the a class="fancybox" only for the image whose thumbnail has been clicked. This makes that fancybox is only able to find one image of the gallery. I don't want to define the class fancybox to the 's that define the thumbs for galleriffic because i dont want the images to be zoomed when clicked on the thumbnail but on the main image.

In a way, what i need is to generate all the 's with the fancybox class but hide all the not shown, instead of generating each time the one I need via galleriffic. This is the only solution I can come up with but it is not neat. I like how galleriffic deals with generating the main image each time the thumbnail is clicked.

I am wondering if someone can come up with a nicer solution. For example, fancybox could be able to know which image comes next by searching in the next galleriffic thumbnail's .

I have tried to make a working jsfiddle demo but there's too much code involved. Also there is no definite problem but a conclict of implementations. I think you can replicate my current situation easily.

Thanks for the effort!

Answer 1

I tried your method above, editing the BuildImage function as you did. For me, it successfully links to the image, but does not load in FancyBox.

I have this code in the main file:

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

You were successful combining the two, correct?