CODEWITHSUNDEEP
jqueryfancybox
dude
dude

Reputation: 4972

Next and previous button not visible in fancybox jquery

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

Upvotes: 1

Views: 20039

Answers (6)

Brian KD
Brian KD

Reputation: 71

This is an old issue, but I recently had a problem with Fancybox3 not showing the close, next, and previous buttons. I had the necessary CSS and JS files included, in the proper order, and my JS configuration was correct (no JS errors).

To fix the issue I had to add data-fancybox="gallery" to my anchor (<a>) tags.

Upvotes: 0

Andrew MacNaughton
Andrew MacNaughton

Reputation: 813

I know this is an old issue but i had to add data-fancybox-group='1' to get the buttons to show up automagically

Upvotes: 0

akbarbin
akbarbin

Reputation: 5105

I have tip simple tips but it works for me. You have to add rel="gallery1".

<a class="fancybox" href="images/product2_big.jpg" rel="gallery1"><img src="images/open-icon.png" alt="" /></a>
<a class="fancybox" href="images/product2_big.jpg" rel="gallery1"><img src="images/open-icon.png" alt="" /></a>

I hope everyone can fix it. Thanks

Upvotes: 1

nematoth
nematoth

Reputation: 383

On the anchor tag that the user clicks on in your html page, make sure you include rel="group" within the anchor tag. This should automatically pull in the next and previous buttons.

Upvotes: 5

Christoph
Christoph

Reputation: 51201

EDIT:

On your Testpage:

  1. check if jquery.fancybox.js and fancybox.css are included properly (no Type-Exception: no method "fancybox" for this object)
  2. examine your code to see if the pictures are loaded (path-errors in your css, typos...)
  3. check, if your arrows are correctly positioned (display, visibility, position left, right...)

I'm sure, It's one of the 3 things above.

Upvotes: 0

JFK
JFK

Reputation: 41143

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)

Upvotes: 4

Related Questions