jQuery toggle image rotation

Question

I need to run the code sample below so that it works on a toggle, so when the div is clicked it starts the image rotation and when it is clicked again it starts and so on? Thanks in advance :)

 $('#pause_button1').click(function() {

    /* need to run this when clicked - need a toggle */ 

        function changeImage(element, imageNumber){
            imageNumber++;

            if(imageNumber > 6){
                imageNumber = 1;
            }
            console.log(imageNumber);
            element.addClass('pause_button' + imageNumber, 200);

            element.attr('class', 'pause_button' + imageNumber);
            setTimeout(function(){changeImage(element, imageNumber)}, 200);  
        }

        changeImage($('#pause_button'), 0);    
});

example: jsfiddle

if you look at this example: jsfiddle.net/AKgZn/2 it needs to cycle when the white square (#pause_button1) is clicked and when its cycling and you click the cycling square again it returns to the white square

David · Accepted Answer · 2011-08-17 17:24:00Z

2

Try this:

html:

<div id="pause_button" class="pause_button1">

javascript:

$('#pause_button').click(function() {

    //Initially sets global variable is_toggled to true, then
    //toggles it back and forward to true and false
    window.is_toggled = !window.is_toggled;
    if (window.is_toggled) { 
      function changeImage(element, imageNumber){

          imageNumber++;

          if(imageNumber > 6){
            imageNumber = 1;
          }
          console.log(imageNumber);
          element.attr('class','pause_button' + imageNumber);
          window.timeOutId = setTimeout(function(){changeImage(element, imageNumber)}, 200); 
      }
      changeImage($('#pause_button'), 0);    
  } else {
       clearTimeout(window.timeOutId);
       $('#pause_button').attr('class','pause_button' + 1);
  }  
});

The key is the global variable window.is_toggled, although you can use any name: window.my_variable, or whatever. You don't need to initially declare it with "var" as, fortunately, !undefined = true.

Hope that helps? Good luck!

edited Aug 17, 2011 at 17:24

answered Aug 10, 2011 at 9:54

David

8446 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

HAWKES08 Over a year ago

if you look at this example: jsfiddle.net/AKgZn/2 it needs to cycle when the white square (#pause_button1) is clicked and when its cycling and you click the cycling square again it returns to the white square.

HAWKES08 Over a year ago

hey i have tried it on a live version and still not working?

HAWKES08 Over a year ago

how would i get it always stop and start on the same div please?

David Over a year ago

Like this: jsfiddle.net/AKgZn/76 Could you upvote my answer? Thanks! :)

cellcortex · Accepted Answer · 2011-08-10 13:44:25Z

You can put a toggle flag in a closure that surrounds your code which has the advantage of not introducing global variables.

(function() {
    var toggled = true; // toggle flag in a closure

    var changeImage = function(element, imageNumber) {
        imageNumber++;

        if(imageNumber > 6) {
            imageNumber = 1;
        }
        console.log(imageNumber);
        element.addClass('pause_button' + imageNumber, 200);

        element.attr('class', 'pause_button' + imageNumber);
        setTimeout(function(){changeImage(element, imageNumber)}, 200);  
    };

    $('#pause_button1').click(function() {
        if (toggle) {
            changeImage($('#pause_button'), 0);
        } else {
            // do what should happen if not toggled
        }
        toggle = !toggle; // flip the toggle
    });
})(this);

Collectives™ on Stack Overflow

jQuery toggle image rotation

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related