Search code examples
jqueryfancybox

Fancybox navigation arrows not showing up

I am a newbie to jquery. All animations like transitions and speed is working fine. However, 'showNavArrows' and 'cyclic' isn't working. Here's the code:

$(document).ready(function() {
    $("a#single_image").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'   :   600, 
        'speedOut'  :   200, 
        'overlayShow'   :   false,
        'cyclic'    :   true,
        'showNavArrows' :   true
    })
});

Here's the available options: http://fancybox.net/api

Solution

  • Cyclic and navigation arrows only will show up if you have a group of elements in a gallery, which means that the elements of the gallery should have the same rel attribute check this post for examples

    As @Pasha Maigutyak pointed out below, if using fancybox v3+, it requires to set data-fancybox="some group/gallery name" to see the navbar