How to integrate an image gallery made with Roundabout with Fancybox?

I am trying to create a compact image gallery using the Roundabout plugin.

The carousel should rotate the thumbnails and, only for the image currently on focus, open the larger image in a Fancybox popup when clicked.

This is how the markup looks like:

<ul class="image-gallery">
    <li id="img-1"><a href="images/picture1.jpg"><img src="images/th2_picture1.jpg" alt="picture 1" /></a></li>
    <li id="img-2"><a href="images/picture2.jpg"><img src="images/th2_picture2.jpg" alt="picture 2" /></a></li>
    <li id="img-3"><a href="images/picture3.jpg"><img src="images/th2_picture3.jpg" alt="picture 3" /></a></li>
    <li id="img-4"><a href="images/picture4.jpg"><img src="images/th2_picture4.jpg" alt="picture 4" /></a></li>
    <li id="img-5"><a href="images/picture5.jpg"><img src="images/th2_picture5.jpg" alt="picture 5" /></a></li>
    <li id="img-6"><a href="images/picture6.jpg"><img src="images/th2_picture6.jpg" alt="picture 6" /></a></li>
</ul>

The problem is, if I try to activate both Roundabo开发者_如何学Cut and Fancybox on the images, clicking on them will trigger both the rotation and the popup, no matter on which image I clicked on. The popup, instead, should only be active for the image currently in focus.

I cannot unbind the click event on thumbnails, because this would disable the rotation too.. This is a link to an example page (the gallery is at the bottom of the page).

EDIT:

Here's the jQuery that runs on page load:

$(function() {
    $('ul.image-gallery').roundabout({
        duration: 1200
    });
    $('ul.image-gallery a').fancybox();
});

ok, after inspecting the page you have mentioned, the focus image have roundabout-in-focus class so following may resolve this issue. try it

$(function() {
    $('ul.image-gallery').roundabout({
        duration: 1200
    });
    //$('ul.image-gallery .roundabout-in-focus a').fancybox();
});

Edit: try to map the click event of focused image link and open fancybox manually for link url. Also remove fancybox mapping in above function. (I've commented it in code)

$('ul.image-gallery .roundabout-in-focus a').live('click',function(event){
event.preventDefault();
$.fancybox({'href':$(this).attr('href')});
})

In addition to what the options you're

$('ul.image-gallery').find('li').focus(function() {
        $(this).find('a').fancybox.cancel();
    }
});

This assumes that you are using roundabout on the ul, and fancybox on the anchor tags inside of them. When the roundabout gives focus to an li, it cancels the fancybox that will do the same thing.