Slideshow in FancyBox Image Gallery?

Question

I am just starting out learning some HTML and javascript (read: I know practically nothing about this stuff) and would like to have my index.html page open a rotating image

Answer 1

Here is how I set up the function. I added the count because when loading a gallery the onStart/onComplete calls will fire everytime a new image loads. I only want the first call to bind the setInterval to the next call.

  function toggleRotating(fromButton) {
      count = count + 1;
      if (fromButton == false) {
        clearInterval(rotatingInterval);
        rotatingInterval = false;
        count = 0;
      } else {
        if(count == 1)
            rotatingInterval = setInterval($.fancybox.next, 10000);

      }
   }

And here's my global vars and method of launching fancybox.

var rotatingInterval = false;
var count = 0;
$(function () {
    $("a.slide").attr('rel', 'presentation1').fancybox({'autoDimensions':false,'height':540,'width':720,'autoScale':false,'cyclic':true, 'onStart': function(){ toggleRotating(true); } });
});

I didn't create a button to stop rotating. I think I will make it so if you click on the next or prev buttons it will toggleRotating to false.

Answer 2

To turn your fancybox into a slideshow once it opens, without extra buttons, use the "onComplete" option to set a timer to call "next()". For example:

jQuery("a.fancybox").fancybox({
    "onComplete":function() {
        clearTimeout(jQuery.fancybox.slider);
        jQuery.fancybox.slider=setTimeout("jQuery.fancybox.next()",5000);
    }
});

Answer 3

You can add this to the end of your javascript:

setInterval($.fancybox.next, 10000);

The number represents the waiting time, in milliseconds (so in my example it's 10 seconds). Also, be sure, in the options of the fancybox, to specify cyclic = true, or else it will stop at the last image. (unless that's what you want)

edit: To add a pause you could do something like the following:

Instead of that one line in your javascript, add this:

var rotatingInterval = FALSE;
function toggleRotating(fromButton) {
  if (rotatingInterval) {
    clearInterval(rotatingInterval);
    rotatingInterval = FALSE;
  } else {
    rotatingInterval = setInterval($.fancybox.next, 10000);
    if (fromButton)
      $.fancybox.next();
  }
}
toggleRotating(FALSE);

And then you can have a button in your html, like this:

<input type="button" value="Pause" onclick="toggleRotating(TRUE);" />

Which would do play/pause.