Question

当您将鼠标悬停在fancybox-wrap上时，是否可以暂停或将自动播放设置为false？

我想将autoplay设为true并在鼠标未超过fancybox-wrap时将css对象的不透明度更改为.5。

当我将鼠标移到fancybox-wrap上时，我希望autoPlay为false或暂停，并将不透明度更改回1。

我目前的剧本是：

$(".fancyboxItem").fancybox({
    afterLoad : function(){
        var xyz = (this.index);
        var fancyNavString = '<div class="fancyNav">';
        $('a.fancyboxItem').each(function(index){
            if (index==xyz)
            fancyNavString = fancyNavString + '<a class="fancyNavIndex selected" href="javascript:;$.fancybox.jumpto('+(index)+')"></a>';
            else
                fancyNavString = fancyNavString + '<a class="fancyNavIndex" href="javascript:;$.fancybox.jumpto('+(index)+')"></a>';
            });
        var fancyNavString = fancyNavString + '</div><div class="fancyClose"><a href="javascript:;$.fancybox.close()"></a></div>';
        var fancyNavTitle = fancyNavString + '<p>'+(this.index + 1)+' of '+this.group.length+'</p>';
        this.title = fancyNavTitle
        },
    helpers : {
        title : {               
            type : 'inside',
                },              
    },
    'loop'              : true,
    'arrows'            : false,
    'closeBtn'          : false,
    'autoPlay'          : true,
    'playSpeed'         : 4000,
    'margin'            : 50,
    'padding'           : 15,
    'openSpeed'         : 500,
    'closeSpeed'        : 250,
    'nextSpeed'         : 500,
    'prevSpeed'         : 500,
    'openSpeed'         : 500,
    'speedOut'          : 500,
    'openEffect'        : 'fade', 
    'closeEffect'       : 'fade',
    'nextEffect'        : 'fade',
    'prevEffect'        : 'fade',
});

}）;

测试页面是：

http://brycedavis.com/html/desertsunflower3.html

Answer 1

尝试使用afterShow回调选项，例如：

afterShow : function() {
 $(".fancybox-wrap").hover(function() {
  $.fancybox.play();
  $("#targetElement").css({'opacity': 1});
 }, function() {
  $.fancybox.play();
  $("#targetElement").css({'opacity': 0.5});
 });
}

$.fancybox.play() API方法可以打开/关闭幻灯片

fancybox 2.0.3 - 自动播放选项

1 个答案: