Question

As an exercise to learn more about about how jQuery plugins work, I’d like to stop auto scrolling in a jQuery carousel plugin from the javascript console (using Firebug with Firefox).

In a demo of the plugin here, it’s trivially easy to stop the autoscrolling. I just use the following code in the console.

$('#mycarousel').jcarousel('stopAuto')

However, on this site which uses an older version of the above plugin (and an older version of jQuery) the equivalent code:

$('#showcaseHolder').jcarousel('stopAuto')

Does not work.

One difference I noticed is that in the first (working) case the call to jcarosel returns ‘undefined’ and in the second (not working) case it returns the element itself.

What’s the difference between these two cases? How can I call ‘stopAuto’ on that second site? Why does it return the element in the second case?

Thanks for your help!!

Answer 1

You say you are doing this for learning how plugins work.. if you were to call $('#mycaousel').jcarousel('stopAuto') in the new version, it returns undefined because it is not intended to be chained. In the old version, it returns the element itself because the plugin developer intended on this being chainable, meaning that you could maybe do something like, $('#mycaousel').jcarousel('stopAuto').jcarousel('startAuto')

in the oldskool version:

jCarousel function accepts an ‘options’ object, which allows you to specify optional params in an object like: {scroll: 1}

Without reading any documentation on this older version and from looking at the code, I would assume that you could supply ‘0’ to an ‘auto’ optional param and this would turn off autoscroll. Right now you have auto set to 15, meaning it should autoscroll after 1.5 seconds

Try this:

jQuery(document).ready(function() {
    jQuery('#showcaseHolder').jcarousel({
        scroll:1,
        itemLoadCallback: function (carousel, state) {
            JQUERY_CARA_LEFT = carousel;            
        },
        auto: 0, /* was auto: 15 */
        wrap:'both' 
    });
    jQuery('#showcaseHolderRight').jcarousel({
        scroll:1,
        itemLoadCallback: function (carousel, state) {
            JQUERY_CARA_RIGHT = carousel;           
        },
        auto: 0, /* was auto: 15 */
        wrap:'both' 
    }); 
});

Note: you can also remove auto: 0 because if you do not supply the optional ‘auto’ param it defaults to ‘0’

UPDATE (based off of comments):

I could just tell you the answer but I want to explain how I got to this:

In the jcarousel.js source, this is the key part:

// Create shortcut for internal use
var $jc = $.jcarousel;
 ...

$jc.fn.extend({
 ...
startAuto: function(s) { ... },  /* s = number of seconds to autoscroll by */
stopAuto: function() { ... }
 ...

This means that ‘startAuto(s)’ and ‘stopAuto()’ are parameters of the jcarousel object.

Since in your code, when you instantiate your jcarousel objects you place one in var JQUERY_CARA_LEFT and another in JQUERY_CARA_RIGHT, this is the format you would need to use:

To start at any time:

JQUERY_CARA_LEFT.jcarousel.startAuto(15);
// or
JQUERY_CARA_RIGHT.jcarousel.startAuto(15);

And to stop at any time:

JQUERY_CARA_LEFT.jcarousel.stopAuto();
// or
JQUERY_CARA_RIGHT.jcarousel.stopAuto();