Next and previous button not visible in fancybox jquery

Question

jquery

$(".gallery_bg").fancybox({//displaying images

        /*openEffect    : 'elastic',
        closeEffect : 'elastic',
        'cyclic':'true',
        'scrolling':'yes',
        'showNavArrows':'true',
        helpers : {
            title : {
                type : 'inside'
            }
        }
    */
        openEffect  : 'elastic',
    closeEffect : 'elastic',
    showNavArrows        : true,
    closeBtn        : false,
    helpers     : { 
        title   : { type : 'inside' },
        buttons : {}
    }

    });

i have included the style.css

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

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

after including too i am not able to see the next and previous icon?

jsfiddle link

Answer 1

Be sure that the fancybox_sprite.png file in in the same folder than the jquery.fancybox.css file.

If you want to display the next/prev arrows permanently, not on mouse hover only, then use this inline css (after you loaded/linked to the jquery.fancybox.css file)

<style type="text/css">
 .fancybox-next span {
  left: auto;
  right: 20px;
 }
 .fancybox-prev span {
  left: 20px;
 }
</style>

Note: this is for fancybox v2.x (which I assumed you are using because the options you are using in your script)