Question

I’m trying to do a background image slideshow using JQuery.
I found an interesting example here:
Creating a JQuery Slideshow of a Background-Image

That is:

$(function() {
    $("#bannerTable").loadBGImage();
    setInterval('$("#bannerTable").loadBGImage()', 5000);
});

$.fn.loadBGImage = function() {
    var images = ["home_photo_welshboy.jpg", "home_photo_jam343.jpg", "home_photo_xdjio.jpg", "home_photo_ccgd.jpg"];
    var image = images[Math.floor(Math.random() * images.length)];
    return this.each(function() {
        var $obj = $(this);
        $obj.fadeOut(500,function() {
            $obj.css('background', 'url(http://l.yimg.com/g/images/' + image + ')').fadeIn(500);
        });
    });
}

There are a few things I want to change, which I can’t seem to get my head around.
Firstly, I’d like the slideshow to load the next image, not a random image. Secondly, I need the child elements of the div to be visible at all times and not fade with the parent.

Any hints on how to do that?

Answer 1

Simplest way : Create a global variable.

var currentPic = 0;
$(function() {
    $("#bannerTable").loadBGImage();
    setInterval('$("#bannerTable").loadBGImage()', 5000);
});

$.fn.loadBGImage = function() {
    var images = ["home_photo_welshboy.jpg", "home_photo_jam343.jpg", "home_photo_xdjio.jpg", "home_photo_ccgd.jpg"];
    var image = images[currentPic];
    currentPic = (currentPic+1)%images.length; //loop once you reach last pic.
    [...]

Secondly, it is simply impossible to have a child visible while a parent is hidden. Take the example :

<div style="display:none">hide me<span style="display:block">show me</span></div>

The child will be hidden, since it is inside the parent. To fix this, you could make them siblings within a new parent (<div><div /><span /></div>).