Question

i’ve made a little slideshow and i’m trying to automatize it. Html elements are like this:

<ul>
    <li>
    <h3 class="active-item" data-bg="background-image url">Title 1</h3>
    <div class="news-excerpt"><p>The excerpt</p></div>
    </li>   

    <li>
    <h3 class="" data-bg="background-image url">Title 2</h3>
    <div class="news-excerpt"><p>The excerpt</p></div>
    </li>

    <li>
    <h3 class="" data-bg="background-image url">Title 3</h3>
    <div class="news-excerpt"><p>The excerpt</p></div>
    </li>
</ul>

Here is my slideshow:

$("#alternative-navigation div#last-posts-fadeshow h3").click(function(){
    // Get url of the background image to show.
    var bgvar = $(this).attr("data-bg");

    // Set the right post excerpt to show
    $('.active-excerpt').removeClass('active-excerpt');
    $(this).next('.news-excerpt').addClass('active-excerpt');
    $('.active-item').removeClass('active-item');
    $(this).addClass('active-item');
    Cufon.refresh();
    //alert (bgvar);

    // Switch to right background image
    $("#background-image-container").fadeTo('medium', 0.1, function()
    {
        $("#background-image-container").css("background-image", "url(" + bgvar + ")" );
    }).fadeTo('medium', 1);  
    return false;
});

Now i want it to automaticaly proceed every 4 seconds. How could i make that working:

$('html').addClass('js');

$(function() {

    var timer = setInterval( showDiv, 3000);

    function showDiv() {

        // Select the next post to show
        $(this) = $('#alternative-navigation div#last-posts-fadeshow h3.active-item').parent().next().find('h3');

        // Get url of the background image to show.
        var bgvar = $(this).attr("data-bg");

        // Set the right post excerpt to show
        $('.active-excerpt').removeClass('active-excerpt');
        $(this).next('.news-excerpt').addClass('active-excerpt');
        $('.active-item').removeClass('active-item');
        $(this).addClass('active-item');
        Cufon.refresh();
        //alert (bgvar);

        // Switch to right background image
        $("#background-image-container").fadeTo('medium', 0.1, function()
        {
            $("#background-image-container").css("background-image", "url(" + bgvar + ")" );
        }).fadeTo('medium', 1);  
        return false;       
    }

});

The first part seems to select the right title but nothing happen. Any ideas?

Answer 1

$() or jQuery() is not a variable, you can’t override it by using $(this) = '...';. $() is a function that returns a set of elements filtered by a selector. See: .jQuery()

Instead of trying to override $(this), just create a new variable, for example:

function showDiv() {

    // Select the next post to show
    var el = $('#alternative-navigation div#last-posts-fadeshow h3.active-item').parent().next().find('h3');

    // Get url of the background image to show.
    var bgvar = el.attr("data-bg");

    // Set the right post excerpt to show
    $('.active-excerpt').removeClass('active-excerpt');
    el.next('.news-excerpt').addClass('active-excerpt');
    $('.active-item').removeClass('active-item');
    el.addClass('active-item');
    Cufon.refresh();
    //alert (bgvar);

    // Switch to right background image
    $("#background-image-container").fadeTo('medium', 0.1, function()
    {
        $("#background-image-container").css("background-image", "url(" + bgvar + ")" );
    }).fadeTo('medium', 1);  
    return false;       
}

And to loop back to the start, it depends on your HTML structure, but something like this should work

var el = $('#alternative-navigation div#last-posts-fadeshow h3.active-item').parent().next().find('h3');
if ( el.length == 0 )
    el = $('#alternative-navigation div#last-posts-fadeshow').first().find('h3');