Fancybox 2 arrows not showing up

Question

I'm using fancyBox 2 to display groups of iframe content. I'm able to navigate through the content using the arrows on my keyboard and by clicking on either the right or left side of the content, but I'm unable to get the arrows to display. I've even set the arrows to be visible all the time instead of just on hover and still no luck. I'm going to have clickable content in some of the iframes so I need to be able to turn off the ability to click just anywhere in the content for navigation. Also that option interferes with the scroll bar.

Here is my code

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="../../../scripts/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="../../../scripts/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>

<link rel="stylesheet" href="../../../scripts/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="../../../scripts/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<script type="text/javascript">
    $(document).ready(function() {
    $(".fancybox").fancybox({
        fitToView   : false,
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        showArrows  : true,
        arrows      : true,
        type        : 'iframe',
    });
});
</script>

And the HTML

<a class="fancybox" rel="andyAdams" href="andyadams/one.html"><img src="thumbnailImages/adams1.jpg" height="150" width="150" alt="Andy Adams" /></a>

<a class="fancybox" rel="andyAdams" href="andyadams/two.html"><img src="thumbnailImages/adams2.jpg" height="150" width="150" alt="Andy Adams" /></a>

<a class="fancybox" rel="andyAdams" href="andyadams/three.html"><img src="thumbnailImages/adams3.png" height="150" width="150" alt="Andy Adams" /></a>

<a class="fancybox" rel="andyAdams" href="andyadams/four.html"><img src="thumbnailImages/adams4.jpg" height="150" width="150" alt="Andy Adams" /></a>

Any help is appreciated! Thank you!

Answer 1

Does the close icon show up? The arrows and the close button are all in fancybox_sprite.png. There is a good chance that the file location (In the CSS for background-image on .fancybox-close and others) for the image sprite is incorrect. Try using an absolute URL instead of a relative URL. (http://example.com/fancybox_sprite.png instead of ../fancybox_sprite.png)

Answer 2

I had the same problem. I initially tired putting the images in a different folder (not the css folder) and use css url to link them... it didn't work... but when I put the images in the same css folder... it worked... you should try that...