views:

273

answers:

5

I'm trying to create my own slideshow. The following code fades from one image to another. I'd like to cycle from img1.jpg to img4.jpg but i'm not sure how to pause after each change.

                i++;
                temp = "img"+i+".jpg";
                $("#img").fadeOut(function() {
                    $(this).load(function() { $(this).fadeIn(); });
                    $(this).attr("src", temp);
                });

UPDATE: I've changed the code to the following. On John Boker's advice i've renamed the images to img0, img1, img2, img3. It goes to the first, second, third image the just stops. Any ideas?

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
        <script>

            $(document).ready(function(){           
                var temp="";

                function slideshow(i)
                {
                    temp = "img"+i+".jpg";
                    $("#img").fadeOut(function() {
                         $(this).load(function() {
                                    $(this).fadeIn();
                                    // set a timeout of 5 seconds to show the next image;
                                    setTimeout(function(){ slideshow((i+1)%4); }, 5000);
                         });
                         $(this).attr("src", temp);
                    });
                }

                slideshow(0);


            });

        </script>
    </head>
    <body>
        <img src="img1.jpg" id="img"/>
    </body>
</html>
A: 

set up window.setInterval(function, delay) to call a function at a set interval to execute the code that you have.

There are plenty of plugins that will already cycle images for you (unless the challenge is to write your own), one of my particular favourites is the cycle plugin.

Russ Cam
A: 

Take a look at this jQuery slideshow question

Nick Knowlson
+1  A: 

you probably should have that inside a function:

// show image i
function slideshow(i)
{
    temp = "img"+i+".jpg";
    $("#img").fadeOut(function() {
         $(this).load(function() {
                    $(this).fadeIn();
                    // set a timeout of 5 seconds to show the next image;
                    setTimeout(function(){ slideshow((i+1)%4); }, 5000);
         });
         $(this).attr("src", temp);
    });
}
John Boker
Thanks, it works but has the same problem as Jeff Sternal's - it doesn't loop. How to go back to img1 after img4. I can't get the if statement to do it.
usertest
if i were you i'd start at 0 so it'd be easier to use modulus. the (i+1)%4 would get you your cycle, so if i = 3, (3+1)%4 = 0. your images would be named img0.jpg, img1.jpg, img2.jpg, img3.jpg
John Boker
+2  A: 

You can do it like this, using setInterval:

$(function() {

    var i = 0;

    // Four-second interval
    setInterval(function() {
        $("#img").fadeOut(function() {
            $(this).attr("src", "img" + i++ % 4 + ".jpg");
            $(this).fadeIn();
        });
    }, 4000);
}

I've simplified a few things that might have been causing some of the other problems you're seing, removing the (seemingly superfluous) call to load inside your fadeOut callback and eliminating the unnecessary temp variable.

(Finally, if you aren't just doing this to learn, consider using one of the many excellent slideshow plugins out there, like Cycle.)

Jeff Sternal
Works great but how can this be looped so when it gets to img4 it goes back to img1. I tried an if statement but couldn't get it to work. Thanks.
usertest
Oops, I should have mentioned that the `i` variable has to be initialized outside the function, so that it's not locally scoped and reinitialized each time the function executes. This revised code should work!
Jeff Sternal
A: 

One trick is use an animate a property of an element to its current value using a timer.

Eg

$("#img").fadeIn().show(3000).fadeOut();

Because $(this) is already visible, adding the .show(3000) means that element stays visible for 3s before fading out

Addsy