Is it possible to add fancybox to portfoliojs image gallery?

Question

Plugin portfoliojs was my choice for creating a carousel-style portfolio. However, I have discovered that there is no zoom functionality built into the plug in. Due to relative complexity of the jquery code, I am at a loss how to manually add zoom (more precisely, fancybox) functionality to the gallery. The "lightbox=true" initialization option merely dims the other images in the gallery, but does not zoom the image of choice.

Ideally, I would like to add fancybox functionality to my gallery, e.g. my html would look like this:

    <div id="gallery">
        <a href="someimage.jpg" class="fancybox"> <img src="someimage.jpg></img> </a>              
        <a href="someimage2.jpg" class="fancybox"> <img src="someimage2.jpg></img> </a>
    </div>

However, the gallery in portfoliojs only works when is child element of ( with no level in between):

   <div id="gallery">
         <img src="someimage.jpg></img>               
         <img src="someimage2.jpg></img>
    </div>

I have tried to wrap the <img>elements into <a> but it did not work.

Is there a way I could combine the functionality of two plugins ( portfoliojs and fancybox) without significant code rewriting? What would the alternative be?

Answer 1

This is what I would do.

Having an html like this :

<div id="gallery">
    <img src="images/01.jpg" alt=""/>
    <img src="images/02.jpg" alt=""/>
</div>

where src attribute points to the image to be shown in fancybox, use this code :

var images = [];
$("#gallery").find("img").each(function(i){
    images[i] = $(this).attr("src");
    $(this).bind("click", function(){
        $.fancybox(images,{
            index: i
        });
    })
});

See JSFIDDLE

NOTE: You could use .on() (preferred) instead of .bind() :

$(this).on("click", function(){ ...

it requires jQuery 1.7+ though. See updated JSFIDDLE