没有太多关于的文档tplAPI 选项，所以我将与您分享我的发现。
1). whats the tpl : {},? : tpl代表template，它是数据条目的集合（json 名称/值对格式），返回 fancybox 函数内的元数据。
obj : {
property-name: value // Boolean (true/false), integer (50, 260.3) or string ("string" ... note the quotes)
}
您可以使用tpl如果您想添加不同的 css 样式，例如：将您自己的选择器添加到 fancybox 中：
$(".fancybox").fancybox({
tpl: {
wrap: '<div class="fancybox-wrap mywrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>'
},
});
Notice我添加了班级mywrap所以你可以使用它的选择器添加自定义 css 样式（或通过 jQuery 操作它），例如：
/* add a 5px red border around fancybox */
.mywrap {
border: solid 5px #880000 !important;
}
See JSFIDDLE http://jsfiddle.net/qvFB7/
2). Basically all I need is to have a parent div for both the gallery and the thumbnails.这需要从不同的角度来看待。
当您打开 fancybox 时，会添加两个主要容器（通过选择器）：
2.a). .fancybox-overlay
- 它是页面顶部的半透明覆盖层AND在花式盒子后面
- it's always附加到
body
2.b). .fancybox-wrap
- 它是 fancybox 框及其所有子项（导航和关闭按钮、内容等）
-
它被附加到.fancybox-overlay IF the locked选项设置为true（默认值）如：
$(".fancybox").fancybox({
helpers : {
overlay: {
locked: true
}
}
});
-
OR它被附加到body IF the locked选项设置为false :
$(".fancybox").fancybox({
helpers : {
overlay: {
locked: false
}
}
});
NOTE: .fancybox-wrap将是以下的兄弟姐妹.fancybox-overlay在这种情况下。
-
使用该选项时它会附加到任何指定的自定义容器parent AND the locked选项设置为false
所以有这个html：
<body>
<div id="mainWrapper"></div>
</body>
... and
$(".fancybox").fancybox({
parent: "#mainWrapper", // parent div
helpers : {
overlay: {
locked: false
}
}
});
....fancybox-wrap将作为子元素附加#mainWrapper所以你可以应用你自己的自定义 css 样式，例如：
#mainWrapper .fancybox-wrap {
left: 0 !important;
}
See JSFIDDLE http://jsfiddle.net/3w3az/
3）。当您使用缩略图助手（并链接正确的 js 和 css 文件）时， fancybox 会添加另一个容器：
3.a). #fancybox-thumbs
- 它总是附加到
body
- 它是 的兄弟姐妹
.fancybox-overlay element
如果您需要家长div为了#fancybox-thumbs容器，你可以包裹#fancybox-thumbs及其新的自定义父级div即时使用 fancybox 回调，例如：
$(".fancybox").fancybox({
helpers: {
thumbs: {}
},
afterShow: function () {
if ($(".mythumbswrap").length == 0) {
setTimeout(function () {
$("body").find("#fancybox-thumbs").css({
// custom css (optional)
position: "relative"
}).wrap("<div class='mythumbswrap' />");
}, 100);
}
},
afterClose: function () {
$(".mythumbswrap").remove();
}
});
Notice我们首先检查是否.mythumbswrap已经存在，如果我正在浏览画廊，这可能是真的。如果没有，我们会添加它BUT我们需要等待#fancybox-thumbs附于body因为直到 fancybox 完全添加到 DOM 中才会发生。
We used setTimeout设置延迟。
另请注意，我们删除了父容器.mythumbswrap关闭 fancybox 后，否则它将保留在 DOM 中并且不会作为包装器添加#fancybox-thumbs下次我们打开 fancybox 时。
从现在开始.mythumbswrap is the parent的元素#fancybox-thumbs我们可以应用任何自定义样式，例如：
.mythumbswrap {
background: none repeat scroll 0 0 #FFFFFF !important;
bottom: 0;
display: block;
height: 60px;
width: 100%;
z-index: 10000;
position: fixed;
bottom: 0;
}
See JSFIDDLE http://jsfiddle.net/7c554/
