某些链接上的 FancyBox 导航答案

【问题标题】：FancyBox navigation on certain links某些链接上的 FancyBox 导航
【发布时间】：2011-09-26 09:04:10
【问题描述】：

您好 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();

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

感谢大家的帮助

【问题讨论】：

还有一件事，您的视频是 swf 对象吗，如果是，即使您不使用 "$('.fancy-ico').hide();" 也可能不会显示箭头- 具体来说，flash 总是显示在其他元素的顶部，因此您的箭头可能最终会出现在“下方”。您可以通过删除 "$('.fancy-ico').hide(); 和 $('.fancy-ico').show();" 来测试它

标签： javascript jquery fancybox

【解决方案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();}

            });

【讨论】：