Question

你好StackOverfow的人，我需要帮助FancyBox导航箭头的可见性。我需要它们在图像组上始终可见（不仅在悬停时），而在FancyBox窗口中打开的视频上不可见。

我对图片的代码是：

$("a[rel=images]").fancybox({
    'transitionIn'  : 'none',
    'transitionOut' : 'none',
    'showNavArrows' : 'true',   
    'titlePosition' : 'over',
    'titleFormat'   : function(title, currentArray, currentIndex, currentOpts) {
                          return '<span id="fancybox-title-over">Image <strong>' 
                               + (currentIndex + 1) 
                               + ' </strong>/ ' 
                               + currentArray.length 
                               + (title.length ? ' &nbsp; ' + title : '') 
                               + '</span>';
                       }
});

我添加了两行CSS，使箭头始终在图像上可见：

#fancybox-left-ico {left: 20px;} 
#fancybox-right-ico {right: 20px;}

在FancyBox窗口中打开视频的代码是：

$(".video").click(function() {
    $.fancybox({
        'padding'       : 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'         : 700,
        'height'        : 450,
        'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type'          : 'swf',
        'swf'           : {
            'wmode'             : 'transparent',
            'showNavArrows' : 'false',
            'allowfullscreen'   : 'true'
        }
    });
    //$('.fancy-ico').hide();
    return false;
});

当我点击视频链接时，fancybox窗口会显示两个导航箭头，这是可以理解的，因为这是我添加的2行CSS。当我添加一行代码如下：

$('.fancy-ico').hide();

视频窗口打开时没有任何箭头仍然很好。问题是当我再次点击图像时，箭头没有显示出来，因为我用最后一个jquery线隐藏了箭头。

现在我的问题是如何才能完成这项工作？我在哪里可以插入一段看起来像的代码：

$('.fancy-ico').show();

有没有更聪明的方法做这样的事情？

谢谢大家的帮助

Answer 1

您可以使用onStart函数对图像进行编码：因此，每次加载图像时，它都会显示箭头。

$("a[rel=images]").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'showNavArrows'     : 'true',   
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image <strong>' + (currentIndex + 1) + ' </strong>/ ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
                // onStart: "Will be called right before attempting to load the content"
                'onStart'           : function() {$('.fancy-ico').show();}

            });

某些链接上的FancyBox导航

1 个答案: