Change buttons on fancybox button helper if one image

Question

Edit: Here is a jsfiddle. I'm trying to get the second image (bird) to only show Toggle and Close on the button helper since it only has one image in the gallery.

I'm trying to remove the Prev, Play and Forward buttons on the button helper if there is only one image.

$(document).ready(function() {
    $('.fancybox-buttons').fancybox({
        helpers: {
            buttons: {
                if (this.group.length == 1) {
                    tpl: '<div id="fancybox-buttons"><ul style="width:74px"><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:;"></a></li></ul></div>',
                } else {
                    tpl: '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous"></a></li><li><a class="btnPlay" title="Start slideshow"></a></li><li><a class="btnNext" title="Next"></a></li><li><a class="btnToggle" title="Toggle size"></a></li><li><a class="btnClose" title="Close"></a></li></ul></div>',
                }
            },
        },
    });
});

Clearly I have no idea what I am doing. This gives me a "SyntaxError: missing formal parameter" on the 'if (this.group.length == 1)' line. Does anyone have any suggestions?

Answer 1

The syntax error is caused by the if...else conditional statement, they cannot exist inside of an object in that way.

You could try something like this though:

$(document).ready(function() {
    var fancyTpl = $('.fancybox-buttons').length === 1
        ? '<div id="fancybox-buttons"><ul style="width:74px"><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:;"></a></li></ul></div>'
        : '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous"></a></li><li><a class="btnPlay" title="Start slideshow"></a></li><li><a class="btnNext" title="Next"></a></li><li><a class="btnToggle" title="Toggle size"></a></li><li><a class="btnClose" title="Close"></a></li></ul></div>';

    $('.fancybox-buttons').fancybox({
        helpers: {
            buttons: {
                tpl: fancyTpl
            },
        },
    });
});

---

This is not tested, however the buttons may be disabled automatically for 1 image if you add the optional loop argument set to false like:

$('.fancybox-buttons').fancybox({
    loop: false,
});

Reference to fancyBox options