如果一张图片,则更改 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,
});
编辑:这是一个 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,
});