You are here: Home / Blog / posts / Pixelworkers of CAES DO / jQueried background-image slideshow

jQueried background-image slideshow

by pgang — published Dec 15, 2010 04:10 PM, last modified Jan 28, 2014 02:54 PM
This jQuery solution from Marcofolio.com mimics the large header image slideshow from http://visitphilly.com

I stumbled across this slideshow code last night while working on a freelance project, but it worked out really smoothly so I wanted to document it here! Plus, this would be a good one to implement as an alternative to some of our current slideshows.

I won't detail all the code because the original tutorial over here goes into all that. The part that was interesting to me was how it was set up to gracefully fade into the next image. Essentially, there are two divs, headerimg1 and headerimg2.

    <div id="headerimgs">
        <div id="headerimg1" class="headerimg"></div>
        <div id="headerimg2" class="headerimg"></div>
    </div>

The CSS puts them absolutely positioned one on top of the other.

.headerimg { background-position: left top; background-repeat: no-repeat; width:832px; height:372px; position:absolute;}

The images are identified in an array at the top of the .js file. Then, the code assigns an image as the background for each of the divs, and dynamically cycles through the images every couple seconds. It also simultaneously makes one div display: block and decrements its z-index, while making the other display: none. That way, it's sitting behind the top image ready to show up when the other fades out.

        // Make sure the new container is always on the background
        currentZindex--;
        
        // Set the background image of the new active container
        $("#headerimg" + activeContainer).css({
            "background-image" : "url(images/" + photoObject.image + ")",
            "display" : "block",
            "z-index" : currentZindex
        });

        // Fade out the current container
        // and display the header text when animation is complete
        $("#headerimg" + currentContainer).fadeOut(function() {
            setTimeout(function() {
                $("#headertxt").css({"display" : "block"});
                animating = false;
            }, 500);
        });

Pretty clever!

(Which reminds me, Tyler found this the other day: Google jQueery and pick the top link ♥)

When:

Where:

Contact