ansaurus

Question

Newbie jQuery question: Need slideshow to rotate automatically, not just when clicking navigation.

Answer 1

A:

It's not a solution, but if you really want to just add-on to the existing function, you'll most likely use setInterval or setTimeout to call a modified version of your existing function every x seconds.

And while this is certainly possible (I'm not expert enough to write this off the top of my head), it's something that's built right in to the jQuery Cycle plugin you mentioned. Which could be quite easily implemented into your existing code (I believe).

Sorry I can't offer better advice at the moment.

Matt Crest 2010-05-17 18:32:27

Matt this is the initial road I was traveling down but ran into my own shortcoming understanding jQuery syntax. I'll append what I was originally working with to the post. If I'm barking up the wrong tree then it's probably time to find a version of Cycle that's compatible with 1.3.2

Justin 2010-05-17 18:53:07

Answer 2

+1 A:

Justin, check out the section on setInterval() on this page.

Basically, if you can isolate your code to cycle the pictures into a simple function call, you would just do:

setInterval("myFunction()", 500)

which would call your function every 500ms (.5 seconds). Now, things get a little trickier if you want to be able to stop the interval running. In that case, you need to get the "hInterval" (the interval handle) which is returned from setInterval. Then you can use that in a call to clearInterval()

So that would be done like this:

// set your interval and capture the handle
var hInt = setInterval("myFunction()", 500);

< blah blah blah > 

// clear the interval so it doesn't fire again
clearInterval(hInt);

eidylon 2010-05-17 19:18:54

Answer 3

+1 A:

You've got two problems to solve here:

Create a function that can determine the next frame.
Call that function on a given interval.

Split out the code that displayes the current frame as its own function, as in showFrame().

Then make a function that determines which frame to call next, as in getNextFrame().

Finally, add buttons that call setInterval() and clearInterval() as needed, as in toggleSlideShow().

But once you get this working, make another attempt at Cycle or another such plugin.

    <script>
    // Consider calculating these values instead of hard-coding them.
    // The "currrentFrame" is the id with the "active" class,
    // and the totalFrames could be counted with jQuery.   
    var currentFrame = 1; 
    var totalFrames = 4;
    var timeoutId;

    $(document).ready(function (){
        // Handle the numbered button clicks
        $('#button a').click(function(){showFrame($(this).attr('rel'));
        });
        //handle the start/stop clicks
        $('#controlButton a').click(function(){toggleSlideShow($(this).attr('rel'));
        });
    });

    // I put the contents of the original click handler here
    // so that it could be called by both the button and the timer.
    function showFrame(integer){           
        $('#myslide .cover').css({left:-820*(parseInt(integer)-1)}).hide().fadeIn(); 
        $('#button a').each(function(){
            $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
        // storing the current frame globally
        currentFrame = integer;
        }; 

    // determine the next frame using the 
    // currentFrame global. Again, a better way
    // to do this could be to calculate the current
    // frame with jquery...
    function getNextFrame() {
        currentFrame = parseInt(currentFrame);
        currentFrame++;
        if(currentFrame > totalFrames)
            currentFrame = 1;
        showFrame(currentFrame);
    }

    // Start and stop the slide show.
    // The important part here are the setInterval and
    // clearInterval functions.
    function toggleSlideShow(state){
        // using the same technique for the start
        // and stop buttons
        $('#controlButton a').each(function(){
            $(this).removeClass('active');
            if($(this).hasClass('button'+state)){
                $(this).addClass('active')}
                });
            if(state == "Start") {
                //Store the timeoutId for later...
                timeoutId = setInterval("getNextFrame()",1000); // time in milliseconds
                }
            else {
                //...so it can be used to stop the show.
                clearInterval(timeoutId);
            }
     }
    </script>

Here is the source for the start/stop buttons I added. You can put this where you like--I inserted it after the button div.

    <div id="controlButton">
        <a class="buttonStart" rel="Start" href="#">Start</a>
        <a class="buttonStop" rel="Stop" href="#">Stop</a>
    </div>

I also defined .buttonStart,.buttonStop in the CSS file.

Nate 2010-05-17 20:46:57

Nate you're a gentleman and a scholar. The code you provided worked splendidly even after I got my plebeian hands on it and set it so the cycling is automatic without the aid of a start / stop button. Thanks a ton! And you're right, a plugin would have been a much more elegant solution.

Justin 2010-05-17 21:54:25

Glad to help. Best of luck!

Nate 2010-05-18 01:55:54

ansaurus

tags:

views:

answers:

Newbie jQuery question: Need slideshow to rotate automatically, not just when clicking navigation.

related questions