Question

I am having an issue with the jquery tools scrollable plugin:
http://jquerytools.org/documentation/scrollable/index.html

Also using the scrollable autoscrolling plugin:
http://jquerytools.org/documentation/scrollable/autoscroll.html

I am trying to pause the slideshow when a link is clicked, here is my html markup:

<a id="pauseSlideshow" href="javascript:;">Pause Slideshow</a>

Here is my javascript:

<script type="text/javascript">

    var scrollableApi;

    $(document).ready(function () {

        // Initialize the slideshow 
        scrollableApi = $('#slideshow')
            .scrollable({ items: '.scrollable > .items', circular: true, mousewheel: false, speed: 1000 })
            .navigator({ navi: "#slideshow > .scrollable-nav", naviItem: "a", activeClass: "current" })
            .autoscroll({ interval: 3000, autopause: true, api: true });

        // Pause the slideshow when the link is clicked
        $("#pauseSlideshow").click(function () {  
            alert("should pause slideshow");
            scrollableApi.pause();
            alert("no error");
         });

    });
</script>

I am seeing both of my alerts display, but the slideshow is still auto scrolling. There is no console errors in Chrome inspector.

Any ideas would be great, I have found the jQuery tools documentation to be lacking in examples of how these API methods should be used. So maybe I am using them incorrectly?

Answer 1

It seems like the autoscroll constructor isn’t chaining correctly, so isn’t returning the instance of the scrollable you are creating.

Try changing your code slightly to get a reference to the API after it’s been initialized:

var scrollableApi;

$(document).ready(function () {

    // Initialize the slideshow 
    $('#slideshow')
        .scrollable({ items: '.scrollable > .items', circular: true, mousewheel: false, speed: 1000 })
        .navigator({ navi: "#slideshow > .scrollable-nav", naviItem: "a", activeClass: "current" })
        .autoscroll({ interval: 1000, autopause: true, api: true });

    // get a reference to the API
    scrollableApi = $('#slideshow').data('scrollable');

    // Pause the slideshow when the link is clicked
    $("#pauseSlideshow").click(function () {
        scrollableApi.pause();
    });

});