Question

This was all working before and all the sudden it stopped working and I can’t seem to figure out if I’ve done something wrong. All I need is the left, right arrows and helper buttons to show when fancybox is open. Any help is much appreciated.

ps. all files are there because it used to work just fine I just created a new page and it stopped working.

    <!-- Add jQuery library -->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-buttons.css?v=2.0.3" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js?v=2.0.3"></script>

<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-thumbs.css?v=2.0.3" />
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=2.0.3"></script>
<script>
    /* <![CDATA[ */

    $(document).ready(function() {
        $(".fancybox-buttons").fancybox({
        prevEffect      : 'none',
        nextEffect      : 'none',
        closeBtn        : false,
        helpers     : { 
            title   : { type : 'inside' },
            buttons : {}
        }
    });
    });
    /* ]]> */
    </script>


<ul>
    <li><a class="fancybox-buttons" href="img/pic1.jpg" title="my title"><img src="img/pic1.jpg" alt="" class="thumb"  /></a></li>
    <li><a class="fancybox-buttons" href="img/pic2.jpg" title="another title."><img src="img/Sociales/2008/pic2.jpg" alt="" class="thumb" /></a></li>
</ul>

Answer 1

Thanks for sharing the link.

The fancybox buttons (as well as the normal navigation arrows) will show up only if you have set a gallery of elements. Neither the navigation arrows or the buttons will be displayed when fancybox opens single element.

In order to set a gallery, two or more elements have to share the same rel attribute, or the same data-fancybox-group attribute. The links in your demo file have none of those.

Your script is correct, just set to your images any of the attributes described above like

<a class="fancybox-buttons" rel="gallery" href="{target}"...etc