jquery - 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 gallery using FancyBox.

I've got it all set up, to the point that the first image comes up in a modal dialog when the page loads, but I'd like the gallery to automatically rotate from one image to the next, perhaps after some specified time interval. Is that possible? How would I go about setting that up?

Again, the simpler the answer, the better--because I don't know squat.

I humble myself before the programming wizards of our time...

Answer 1

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.