jQuery 如何使用fancybox按钮助手+fancybox缩略图助手？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8956820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use fancybox button helper + fancybox thumbnail helper?
提问by Artur Haddad
I need to use both of them simultaniously (fancybox button helper and thumbnail helper)
我需要同时使用它们（fancybox 按钮助手和缩略图助手）
I can only use one of them at a time.
我一次只能使用其中之一。
These are the examples of each function: http://fancyapps.com/fancybox/#examples
这些是每个功能的示例：http: //fancyapps.com/fancybox/#examples
Already tried using the two classes:
已经尝试使用这两个类：
<a class="fancybox-buttons fancybox-thumbs"
But it doesn't work... only one at a time, like:
但它不起作用......一次只有一个，例如：
<a class="fancybox-buttons"
or
或者
<a class="fancybox-thumbs"
.
.
These are the javascripts of each:
这些是每个的javascripts：
/*
Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
});
Thanks
谢谢
回答by JFK
You only need a single script to use both so with a single classin your htmlshould work like
您只需要一个脚本即可同时使用这两个脚本，因此class您html应该使用一个脚本
<a class="fancybox" ...
then the script:
然后脚本：
$('.fancybox').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
title : {
type : 'inside'
},
buttons : {},
thumbs : {
width : 50,
height : 50
}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
