3

我有一个图片库。

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 可以吗？

4

3 回答 3

2

另一种方法：

假设您的 html 中有 id="chkFlag" 的复选框。

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

      });

并在您的函数中使用标志：

 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'
             });
于 2013-01-07T09:59:07.623 回答
1

带有自动播放显示按钮的 jsFiddle DEMO 标题栏 （用于视觉确认的备用图像）

带有自动播放显示按钮的 jsFiddle DEMO 标题覆盖

您可以在 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
});
于 2013-01-07T14:15:58.780 回答
0

@arttonics，我对你的 fancyBox 精通感到震惊。这是另一种方式：

与@JFK 链接的问题不同，@Xone 您并没有说您需要按钮位于标题区域甚至灯箱框架内。您可能会对用 fancyBox 打包的“按钮”助手感到满意。它提供了一个带有“prev”、“play/pause”、“next”、“full-size”/“fit”和“close”按钮的按钮栏。只需添加

<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">它注入的内容。

于 2013-05-17T22:04:09.347 回答