jQuery Tools Scroller with autoscroll & jQuery Colorbox

I have implemented a simple scrollable photo-gallery with jQuery Tools.

I then attached the autoscroll behavior to the jQuery tools scroller to create a photo slide-show.

Then I attached the jQuery colorbox to the photo slide-show to provide a larger version of the images.

I'm running into the following problems. I hope I can explain them with the best possible way since the behavior sometimes is unpredictable.

The major issue is that when I stop the slideshow and click on the image to bring the colorbox or the next/previous buttons the slideshow starts again. Is there a way to disable this behavior??

Another problem is that when I click on the colorbox it looks like there are 9 images instead of 7. You can see that by clicking on a photo and seeing the index that colorbox generates on the top right of the zoomed version of the photo.

Why is this happening? I cannot find an explanation.

Finally the most annoying part of all which has happened twice and I cannot reproduce is that jQuery tools scrollable at some point when you open and close colorbox it messes up the indexes and s开发者_如何学编程crolls an additional step resulting into a blank non-existent photo .. this also messes up the display of the current photo number which is on the bottom left - the navigation.

I know that those two libraries are not necessarily meant to work together however I posted these questions here in case someone has done the same or a relative script.

Any help would be verry much appreciated.

Javascript code:

$("#gallery").scrollable({circular:true}).autoscroll({autoplay:true});
var api = $("#gallery").data("scrollable");
var indd = api.getIndex();

api.onSeek(function() {
    $("#cur-p").html(parseInt(api.getIndex()+1));
    $("#tot-p").html(api.getSize());
});

$("#slid").toggle(function() {
        api.stop();
        $(this).html("SLIDESHOW ON");
        return false;
    }, function() {
        api.play();
        $(this).html("SLIDESHOW OFF");
        return false;
    }

);

$("#cur-p").html(parseInt(api.getIndex()+1));
$("#tot-p").html(api.getSize());

$("a[rel=color-box]").colorbox();

* UPDATE * Up to now I have managed to figure out one of the strange behaviors.

Colorbox shows more total images than there are. This is because it is called after the autoscroll plugin. Autoscroll creates 2 extra divs one before the beginning and one after the end when the circular property is on. Thus colorbox finds them and adds them to the equation.

If I don't call autoscroll at all colorbox works fine.

So a solution would be to call colorbox like that:

$("#gallery").scrollable().find("a[rel=color-box]").colorbox();

and when colorbox has finished loading then apply the autoscroll plugin to the gallery. however i'm not sure on how to apply the autoscroll on the already created scrollable instance.