某些链接上的FancyBox导航

Question

Hi there good people of StackOverfow, i need help with visibility of the FancyBox navigation arrows. I need them to be always visible (not only on hover) on image groups, but invisible on videos that open in FancyBox window.

the code that I have for images is:

$("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>';
                       }
});

and I've added two lines of CSS to make the arrows always visible on the images:

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

The code for opening videos in FancyBox window is:

$(".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;
});

When i click on video link the fancybox window shows both of the navigation arrows, which is understandable since that is what my 2 added lines of CSS are there for. When I add a line of code that is something like:

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

the video window opens up without any arrows which is still good. The problem is when I click on the images again, the arrows don't show up, because I've hidden the arrows with the last jquery line.

Now my question is how can I make this work? Where can i insert a piece of code that looks like:

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

Is there some smarter way of doing something like this?

Thank you all for any help

Answer 1

You can use to your images code the onStart function: so that, each time the images fancybox loads, it will display the arrows as well.

$("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();}

            });