http://www.pikachoose.com/how-to-fancybox/
我试图让灯箱显示下一个和之前的箭头,但不是在pikachoose舞台上,我有点麻烦.我试图在脚本的fancybox部分添加showNavArrows：true的选项,但它不起作用.那么我尝试使用pikachoose上的导航选项来显示：{text：{prev@R_403_437@s：“Prev@R_403_437@s”,next：“Next”}}
但我一直收到错误,可能我的语法不是在正确的地方？
有人可以帮忙吗？
这是我正在使用的代码：
$(document).ready(function () {
var a = function (self) {
self.anchor.fancybox({
transitionIn: elastic,transitionOut: elastic,speedIn: 600,speedOut: 200,overlayShow: false
});
};
$("#pikame").PikaChoose({
showCaption: false,buildFinished: a,autoPlay: false,transition: [0],speed: 500,showCaption: false
});
});
解决方法
使用这种方法,无法知道哪些图像组将属于fancybox图库(您需要多个元素共享相同的rel属性),因为只有一个pikachoose图像：每个图像都显示为动态切换.pika-stage容器内的href和src属性(分别为< a>和< img>标记).
作为一种解决方法,您需要在将html结构绑定到pikachoose之前构建fancybox元素组(pikachoose将修改DOM结构)
1).所以有这个HTML结构：
<div class="pikachoose">
<ul id="pikame">
<li>
<a title="one" href="image01.jpg" id="single_1"><img alt="" src="thumb01.jpg" /></a>
</li>
<li>
<a title="two" href="image02.jpg" id="single_2"><img alt="" src="thumb02.jpg" /></a>
</li>
<li>
<a title="three" href="image03.jpg" id="single_3"><img alt="" src="thumb03.jpg" /></a>
</li>
</ul>
</div>
2).使用此脚本创建迭代通过每个锚点的fancybox元素组：
var fancyGallery = []; // fancybox gallery group $(document).ready(function () { $("#pikame").find("a").each(function(i){ // buidl fancybox gallery group fancyGallery[i] = {"href" : this.href,"title" : this.title}; }); }); // ready
3).然后将pikachoose绑定到相同的选择器#pikame.您可以使用.end()方法在第一个减速选择器上执行它而不复制它;)
var fancyGallery = []; // fancybox gallery group $(document).ready(function () { // build fancybox group $("#pikame").find("a").each(function(i){ // buidl fancybox gallery fancyGallery[i] = {"href" : this.href,"title" : this.title}; }).end().PikaChoose({ autoPlay : false,// optional // bind fancybox to big images element after pikachoose is built buildFinished: fancy }); // PikaChoose }); // ready
请注意,我们使用了pikachoose选项buildFinished：fancy,当我们点击大图时,它实际上会触发fancybox图库.
4).这是功能：
var fancy = function (self) {
// bind click event to big image
self.anchor.on("click",function(e){
// find index of corresponding thumbnail
var pikaindex = $("#pikame").find("li.active").index();
// open fancybox gallery starting from corresponding index
$.fancybox(fancyGallery,{
// fancybox options
"cyclic": true,// optional for fancybox v1.3.4 ONLY,use "loop" for v2.x
"index": pikaindex // start with the corresponding thumb index
});
return false; // prevent default and stop propagation
}); // on click
}
请注意,我们使用.on()(需要jQuery v1.7)将点击事件绑定到pikachoose元素self.anchor,以使用手动方法$.fancybox([group])触发fancybox库.
对于fancybox v1.3.4或v2.x,此解决方法同样适用.使用v1.3.4参见DEMO,即使使用IE7也可以正常工作;)
