Question

我有一个图片库。

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

我想添加一个新按钮，将自动播放设置为false / true是否可能？

Answer 1

另一种方法：

假设你的html中有一个id =“chkFlag”的复选框。

var flag="";
$('#chkFlag').live("change", function() {
       if ($('#chkShowImage').attr("checked"))
             flag = true;
        else
             flag = false ;

      });

并在你的函数中使用flag：

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

Answer 2

jsFiddle DEMO Title Bar with Autoplay Show Button （视觉确认的替代图片）

jsFiddle DEMO Title Overlay with Autoplay Show Button

您可以在Fancybox标题区域内放置一个按钮，单击此按钮将停止或播放Fancybox节目。它还会进行图像交换以直观地指示当前的播放模式。

上面的jsFiddle DEMO包含完整的教程评论。

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

Answer 3

@arttonics，我被你精力充沛的精通盒子所震撼。这是另一种方式：

与@JFK链接的问题不同，@ Xone你没有说你需要按钮在标题区域内，甚至是灯箱框架内。您可能会对使用fancyBox打包的“按钮”助手感到满意。它提供了一个带有“上一个”，“播放/暂停”，“下一个”，“全尺寸”/“适合”和“关闭”按钮的按钮栏。只需添加

<script type="text/javascript" src="your-path-to/fancybox/helpers/jquery.fancybox-buttons.js"></script>

（在</body>之前）和

<link rel="stylesheet" type="text/css" href="your-path-to/fancybox/helpers/jquery.fancybox-buttons.css"/>

（在<head>中;我使用的占位符路径反映了下载fancyBox时找到文件的位置。）

带有自动播放和控制按钮的基本fancyBox库将是

$(".fancybox-button").fancybox({
    autoPlay    : true,
    closeBtn    : false, // remove the default close button (there's one in the button bar)
    arrows      : false, // (optional) remove the default prev/next hover arrows (they duplicate the button bar's arrows)
    helpers     : {
        buttons : {} // add the buttons bar
    }
});

如果你对CSS很好的话，自定义这些按钮应该是直截了当的 - 感谢@fancyapps让jquery.fancybox-buttons.css可读！我可以想象你也可能最终进入jquery.fancybox-buttons.js来调整它注入的<div id="fancybox-buttons">。

在fancybox上将autoplay设置为false / true

3 个答案: