Question

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 Roundabout 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();
});

Answer 1

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