Changing JS code to make Images Slide

Question

I need help implementing a slide function to my slideshow, I've got most of it done, started off from a tutorial and with lots of browsing on the jquery website, but now I'm stuck and need help.

I want to achieve two things, one is to get the images to slide from right to left, but the first image must not slide in, it stays put but all other images slide.

And I have a caption at the bottom, i've got it figured out how to show and hide the text but not the colored div, basically my goal was to have a caption/footer show up with a link in on the last slide, which would stay a little longer on that particular slide but if it's doesn't that's fine as the first two requests are the most important to me.

• JS Fiddle Link: http://jsfiddle.net/8bBYu/

Thank you in advance, below is the javascript code.

/*
 * Author:      Marco Kuiper (http://www.marcofolio.net/)
 */

// Speed of the automatic slideshow
var slideshowSpeed = 6000;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
        "title" : "Stairs",
        "image" : "vacation.jpg",
        "url" : "http://www.sxc.hu/photo/1271909",
        "firstline" : "Dubstep is a genre of electronic dance music",
        "secondline" : ""
    }, {
        "title" : "Office Appartments",
        "image" : "work.jpg",
        "url" : "http://www.sxc.hu/photo/1265695",
        "firstline" : "Or still busy at",
        "secondline" : "work?"
    }, {
        "title" : "",
        "image" : "biking.jpg",
        "url" : "http://www.sxc.hu/photo/1221065",
        "firstline" : "Get out and be",
        "secondline" : "active"
    }, {
        "title" : "",
        "image" : "nature.jpg",
        "url" : "http://www.sxc.hu/photo/1271915",
        "firstline" : "Take a fresh breath of",
        "secondline" : "nature"
    }, {
        "title" : "Italian pizza",
        "image" : "food.jpg",
        "url" : "http://www.sxc.hu/photo/1042413",
        "firstline" : "Enjoy some delicious",
        "secondline" : "food"
    }
];



$(document).ready(function() {

    // Backwards navigation
    $("#back").click(function() {
        stopAnimation();
        navigate("back");
    });

    // Forward navigation
    $("#next").click(function() {
        stopAnimation();
        navigate("next");
    });

    var interval;
    $("#control").toggle(function(){
        stopAnimation();
    }, function() {
        // Change the background image to "pause"
        $(this).css({ "background-image" : "url(images/btn_pause.png)" });

        // Show the next image
        navigate("next");

        // Start playing the animation
        interval = setInterval(function() {
            navigate("next");
        }, slideshowSpeed);
    });


    var activeContainer = 1;    
    var currentImg = 0;
    var animating = false;
    var navigate = function(direction) {
        // Check if no animation is running. If it is, prevent the action
        if(animating) {
            return;
        }

        // Check which current image we need to show
        if(direction == "next") {
            currentImg++;
            if(currentImg == photos.length + 1) {
                currentImg = 1;
            }
        } else {
            currentImg--;
            if(currentImg == 0) {
                currentImg = photos.length;
            }
        }

        // Check which container we need to use
        var currentContainer = activeContainer;
        if(activeContainer == 1) {
            activeContainer = 2;
        } else {
            activeContainer = 1;
        }

        showImage(photos[currentImg - 1], currentContainer, activeContainer);

    };

    var currentZindex = -1;
    var showImage = function(photoObject, currentContainer, activeContainer) {
        animating = true;

        // 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
        });

        // Hide the header text
        $("#headertxt").css({"display" : "none"});

        // Set the new header text
        $("#firstline").html(photoObject.firstline);
        $("#secondline")
            .attr("href", photoObject.url)
            .html(photoObject.secondline);
        $(".pictureduri")
            .attr("href", photoObject.url)
            .html(photoObject.title);       

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





    var stopAnimation = function() {
        // Change the background image to "play"
        $("#control").css({ "background-image" : "url(images/btn_play.png)" });

        // Clear the interval
        clearInterval(interval);
    };

    // We should statically set the first image
    navigate("next");

    // Start playing the animation
    interval = setInterval(function() {
        navigate("next");
    }, slideshowSpeed);

});

Answer 1

You may be better off looking at a UI framework such as jQuery Tools Scrollable.

http://flowplayer.org/tools/scrollable/

It's very well written, and has a customisable API when you call $('#selector').data('scrollable')