如果一张图片,则更改 fancybox 按钮助手上的按钮

Change buttons on fancybox button helper if one image

编辑:这是一个 jsfiddle。我试图让第二张图片(鸟)只在按钮助手上显示切换和关闭,因为它在图库中只有一张图片。

如果只有一张图片,我正在尝试删除按钮助手上的“上一页”、“播放”和“前进”按钮。

$(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>',
                }
            },
        },
    });
});

显然我不知道自己在做什么。这在 'if (this.group.length == 1)' 行上给了我一个 "SyntaxError: missing formal parameter"。有人有什么建议吗?

如果我能看到整个文档,也许我可以帮助你更多。但也许问题是.length。尝试 .length() 或 .length() <= 1 或组合 :)

语法错误是由 if...else 条件语句引起的,它们不能以这种方式存在于对象内部。

虽然你可以尝试这样的事情:

$(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
            },
        },
    });
});

这没有经过测试,但是如果您将可选的 loop 参数设置为 false,则可能会自动禁用 1 张图像的按钮,例如:

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

Reference to fancyBox options