JQuery Image Switcher

Using something like CrossSlide is fine if you want fancy effects in your image translations, but for more simple effects you can use a single function to simply swap one image for another. First, lets create some simple markup that will allow us to display some images.

<div class="slideshow">
<img src="image1.png" alt="Image 1" />
<img src="image2.png" alt="Image 2" />
<img src="image3.png" alt="Image 3" />
<img src="image4.png" alt="Image 4" />
</div>

When I created this script one of the requirements was the need for different sized images to be added without destroying the layout of the rest of the page. For this reason I also added some code to collect the height and width of all of the image and use the maximum value as the height and width of the containing div. The following little snippet is used to get the maximum value of an array using the notation array.max().

Array.prototype.max = function() {
    return Math.max.apply(null, this);
};

The code to create the image slideshow is quite simple. What is happening here is that every instance of a div with the class slideshow on the page is found that and some setup routines are run on them and their contents. The set up involves setting the initial and final image, setting some default styles for the images and then finding out the maximum height and width of the images in the div. The maximum height and width of the images is used to set the height and width of the containing div. A function is then created that will be used to swap the images and a call to setTimeout() added so that an interval can be created. The advanceSlideshow() function just swaps the currently selected image with the next in the list. This interval is currently set at 5000, which means that every 5 seconds the image will fade from one to the next.

$(document).ready(function(){
    $("div.slideshow").each(function()
    {
        var slideshow = $(this);
        var selectedImage = 0;
        var maxSelectedImage = slideshow.find("img").length - 1;
 
        slideshow.css("position", "relative");
 
        slideshow.find("img")
                .css("position", "absolute")
                .css("top", 0)
                .css("left", 0)
                .hide();
 
        slideshow.find("img:eq("+selectedImage+")").show();
 
        var height = new Array();
        var width = new Array();
        slideshow.find("img").each(function(i){
            var currentImg = $(this);
            height[i] = currentImg.height();
            width[i] = currentImg.width();
            i++;
        });
 
        slideshow.css('height', height.max());
        slideshow.css('width', width.max());
        
        var advanceSlideshow = function()
        {
            var newSelectedImage = selectedImage + 1;
            if(newSelectedImage > maxSelectedImage)
                newSelectedImage = 0;
 
            slideshow.find("img:eq("+selectedImage+")").fadeOut();
            slideshow.find("img:eq("+newSelectedImage+")").fadeIn();
 
            selectedImage = newSelectedImage;
 
            setTimeout(advanceSlideshow, 5000);
        };
        setTimeout(advanceSlideshow, 5000);
    });
});

The good thing about using JQuery for this code is that you are not stuck with the images fading in or out. It is perfectly possible to use slideUp() and slideDown() or even animate() to change the way in which one image is changed for the other.

To run this code just include it in your page, along with the core JQuery library. Any divs containing the class slideshow exist on the page then they will be converted into image swappers, as long as they contain images.