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...

Solution 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.

Solution 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);
    }
});

Solution 3

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.

Comments

[Dr.Fishtable]

Awesome! That works great. Is it possible to add a "Pause" button for End Users to temporarily pause the autoscroll interval?

[Dr.Fishtable]

Well I was hoping for a pause button that would be included in the dialog, as in within FancyBox. Is that possible?

[cambraca]

I don't think it's possible without modifying FancyBox's inner workings, which would take some more work..

[commonpike]

if it triggers on every slide, better use setTimeout instead of setInterval ?