Question

I have an image gallery.

jQuery("a.thumb").fancybox({
  "loop"        : true,
  "autoPlay"    : true,
  "playSpeed"   : 4000,
  "nextSpeed"   : 500,
  "prevSpeed"   : 500,
  "openSpeed"   : 500,
  "speedOut"    : 500,
  "openEffect"  : "fade", 
  "closeEffect" : "fade",
  "nextEffect"  : "fade",
  "prevEffect"  : "fade"
});

I want to add a new button to set the autoplay to false/true is it possible?

Answer 1

jsFiddle DEMO Title Bar with Autoplay Show Button (Alternate images for visual confirmation)

jsFiddle DEMO Title Overlay with Autoplay Show Button

You can place a button inside the Fancybox Title area that when clicked will stop or play the Fancybox show. It will also do a image swap to visually indicate the current playback mode.

The jsFiddle DEMO above contains complete tutorial comments.

CSS:

.fancyControl {
  float: right;
  margin-left: 20px;
}

jQuery:

var fancyControlMode = "play";

function fancyPlay(){
  $.fancybox.play();
  $('.fancybox-title .child img').attr('src', 'http://placehold.it/40x24/00ff00/000000&text=PLAY');
  fancyControlMode = "play";
}

function fancyStop(){
  $.fancybox.play();
  $('.fancybox-title .child img').attr('src', 'http://placehold.it/40x24/ff0000/000000&text=STOP');
  fancyControlMode = "stop";
}

function fancyButton() {
  if (fancyControlMode === "play") {
    $('.fancybox-title .child').prepend('<img class="fancyControl" src="http://placehold.it/40x24/00ff00/000000&text=PLAY" />');
    $('.fancyControl').toggle(fancyStop, fancyPlay);
  } else {
    $('.fancybox-title .child').prepend('<img class="fancyControl" src="http://placehold.it/40x24/ff0000/000000&text=STOP" />');
    $('.fancyControl').toggle(fancyPlay, fancyStop);
  }
}

$(".fancybox").fancybox({
  autoPlay: true,
  afterShow: fancyButton
});