Question

I’m trying tu use the jQuery Backgrounder Plugin as a slideshow but doesn’t quite work. I’d really appreciate any kind of help at all. Thanks. Here’s what I’ve got so far:

HTML:

<div id="my_background">
   <img src="/img/main/home.jpg" />
   <img src="/img/main/home-2.jpg" />
</div>

jQuery call:

$(function() {
      setInterval( $('#my_background').backgrounder({element : '#content-bg'}) , 5000 );
    });

jQuery plugin

Changed line

var img = $(this).children('img').first();

to

var img = $(this).children('img').next();

Once every 5 seconds it should switch the image but it doesn’t work. What am I doing wrong?

Answer 1

Something like this should do the trick, without having to modify the plugin-code:

http://jsfiddle.net/WZ3TL/

HTML

<div id="my_background"></div>
<div id="content-bg"></div>
​

JS

$(function() {

    //list of images
    var images = [
        'http://flickholdr.com/1200/600/landscape/bw',
        'http://flickholdr.com/1200/600/landscape/2'
    ];

    function rotate(){

        //get first images from the list
        var img = images.shift();
        //put it a the end of the list again
        images.push(img);

        //put image in source container
        $('#my_background').html('');
        $('<img/>').attr('src', img).appendTo($('#my_background'));

        //call backgrounder (again)
        $('#my_background').backgrounder({
            element: '#content-bg'
        });
    }

    //initial call
    rotate();

    //call in interval
    setInterval( rotate, 1000 );
});

​