某些鏈接上的FancyBox導航

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函數進行編碼：這樣，每次在圖像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>';
                }
                // onStart: "Will be called right before attempting to load the content"
                'onStart'           : function() {$('.fancy-ico').show();}

            });