Question

I am turning some jQuery into a plugin but i am coming up with errors. Here is the mormal jQuery code.

var current = ($("#gallery a.show")? $("#gallery a.show") : $("#gallery a:first"));

Here is the jQuery plugin code

var current = ($(this).find("a.show")? $(this).find("a.show") : $(this).find("a:first"));

Help would be much appreciated.

Here is ALL the jQuery plugin code.

$(window).load(function(){
    $("#gallery").csstubeslider();
});

$.fn.csstubeslider = function(){
    $(this).animate({'opacity': '1'}, 500);
    $(this).find(".caption").css("opacity", 0.7);

    $(this).find("a").css("opacity", "0");
    $(this).find("a.show").css("opacity", "1");

    var hasplayed = false;
    if(hasplayed == false){
        setTimeout(function hello(){
            $(this).find(".caption").animate({"height": 0, "opacity": 0}, 500);
            hasplayed == true;
        }, 4500);
    }

    setInterval(function(){
        var current = ($(this).find("a.show")? $(this).find("a.show") : $(this).find("a:first"));
        var next = ((current.next())? (current.next().hasClass("caption"))? $(this).find("a:first") : current.next() : $(this).find("a:first"));
        var content = next.find("img").attr("rel");

        next.addClass("show").animate({"opacity": "1.0"}, 500);
        current.removeClass('show').animate({"opacity": "0"}, 500);

        setTimeout(function(){
            $(this).find(".caption").animate({"height": 0, "opacity": 0}, 500);
        }, 4500);
        $(this).find(".content").html(content);
    }, 1000);
}

and here is the jQuery code.

$(window).load(function(){
    $("#gallery").animate({'opacity': '100'}, 5000);
    $("#gallery .caption").css("opacity", 0.8);
    slideshow();
});


function slideshow(){
    $("#gallery a").css("opacity", "0");
    $("#gallery a.show").css("opacity", "1");

    var content = $("#gallery a.show").find("img").attr("rel");
    $("#gallery .content").html(content);

    var hasplayed = false;

    if(hasplayed == false){
        setTimeout(function hello(){
            $("#gallery .caption").animate({"height": 0, "opacity": 0}, 500);
            hasplayed == true;
        }, 4500);
    }

    setInterval("playimages()", 5500);
}

function playimages(){
    var current = ($("#gallery a.show")? $("#gallery a.show") : $("#gallery a:first"));
    var next = ((current.next())? (current.next().hasClass("caption"))? $("#gallery a:first") : current.next() : $("#gallery a:first"));
    var content = next.find("img").attr("rel");

    next.addClass("show").animate({"opacity": "1.0"}, 500);
    current.removeClass('show').animate({"opacity": "0"}, 2000);
    $("#gallery .caption").css("height", 0).animate({"height": 60, "opacity": 0.8}, 500);
    setTimeout(function hello(){
        $("#gallery .caption").animate({"height": 0, "opacity": 0}, 500);
    }, 4500);

    $("#gallery .content").html(content);
}

Answer 1

This doesn’t do what you expect it to:

var current = ($("#gallery a.show")? $("#gallery a.show") : $("#gallery a:first"));

That is equivalent to var current = $('#gallery a.show'); since $(x) will never be false, it might have length of zero but it won’t be false. That means that your plugin doesn’t do what you expect either, you want to check the length:

var current = $(this).find("a.show").length ? $(this).find("a.show") : $(this).find("a:first");

Or better:

// This avoids a double `find('a.show')`.
var current = $(this).find('a.show');
if(current.length == 0)
    current = $(this).find('a:first');

Your next problem is that this isn’t what you expect it to be inside the setInterval and setTimeout callbacks, this will probably be window when the callback is triggered. You want to do something like this:

var _this = this;
setTimeout(function hello(){
    // Use '_this' instead of 'this' in here.
}, ...);

The above also applies to your setInterval calls.

Furthermore, inside your plugin, this is already a jQuery object so you don’t need to $(this), just this will do. And your plugin isn’t chainable but you can fix that with a simple return this;:

$.fn.csstubeslider = function() {
    //...
    return this;
};

You might run into trouble if you try to bind your plugin to multiple things at once, the usual pattern is this:

$.fn.csstubeslider = function() {
    return this.each(function() {
        // 'this' in here is just one matching element so
        // we wrap some jQuery around it and use '$this'
        // inside here.
        var $this = $(this); 

        // The rest of your plugin code goes here, you can
        // use '$this' in here to avoid multiple calls to $().
        // You'll also be able to use '$this' inside your
        // 'setTimeout' and 'setInterval' callbacks too.
    });
};