Question

I’m trying to develop a cycling image slider and have a question about a document I’m referencing for development.

The JQuery function doesn’t actually call a selector and I’m not exactly sure how to read it.

$.fn.cycle = function(options, arg2) {
var o = { s: this.selector, c: this.context };

The script above is in my javascript document and the method below is in my HTML doc calling to the script above.

$(document).ready(function() {
$('.headline').cycle({
    fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, 
    cleartypeNoBg:true
});

.headline is a class that is defined in the HTML document. I’m confused because this has a selector and $.fn.cycle does not.

Is .headline passing in the value to .fn? If so, how is it passing in only to that section of the variable?

If you wish to see the full JQuery function it is here:

$.fn.cycle = function(options, arg2) {
var o = { s: this.selector, c: this.context };

// in 1.3+ we can fix mistakes with the ready state
if (this.length === 0 && options != 'stop') {
    if (!$.isReady && o.s) {
        log('DOM not ready, queuing slideshow');
        $(function() {
            $(o.s,o.c).cycle(options,arg2);
        });
        return this;
    }
    // is your DOM ready?  http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
    log('terminating; zero elements found by selector' + ($.isReady ? '' : ' (DOM not ready)'));
    return this;
}

// iterate the matched nodeset
return this.each(function() {
    var opts = handleArguments(this, options, arg2);
    if (opts === false)
        return;

    opts.updateActivePagerLink = opts.updateActivePagerLink || $.fn.cycle.updateActivePagerLink;

    // stop existing slideshow for this container (if there is one)
    if (this.cycleTimeout)
        clearTimeout(this.cycleTimeout);
    this.cycleTimeout = this.cyclePause = 0;

    var $cont = $(this);
    var $slides = opts.slideExpr ? $(opts.slideExpr, this) : $cont.children();
    var els = $slides.get();
    if (els.length < 2) {
        log('terminating; too few slides: ' + els.length);
        return;
    }

    var opts2 = buildOptions($cont, $slides, els, opts, o);
    if (opts2 === false)
        return;

    var startTime = opts2.continuous ? 10 : getTimeout(els[opts2.currSlide], els[opts2.nextSlide], opts2, !opts2.rev);

    // if it's an auto slideshow, kick it off
    if (startTime) {
        startTime += (opts2.delay || 0);
        if (startTime < 10)
            startTime = 10;
        debug('first timeout: ' + startTime);
        this.cycleTimeout = setTimeout(function(){go(els,opts2,0,(!opts2.rev && !opts.backwards))}, startTime);
    }
});

Answer 1

The selector is this in the plugin.

For example:

$.fn.cycle = function() {
   console.log(this);
};

$('.headline').cycle(); //logs the `.headline` jQuery element

See fiddle: http://jsfiddle.net/maniator/eE6q2/