Slideshow in FancyBox Image Gallery?

问题

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

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

回答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);
    }
});

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

来源：https://stackoverflow.com/questions/4019533/slideshow-in-fancybox-image-gallery

标签

jquery

fancybox