我正在使用 Fancybox 与 Pikachoose 的集成,如下所述: http://www.pikachoose.com/how-to-fancybox/
我试图让灯箱显示下一个和上一个箭头,但不在 pikachoose 舞台上显示,我遇到了一些麻烦。我尝试在脚本的 fancybox 部分添加 showNavArrows: true
选项,但它不起作用。然后我尝试使用 pikachoose 上的导航选项来显示 this: {text: {previous: "Previous", 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
});
});
最佳答案
http://www.pikachoose.com/how-to-fancybox/中解释的方法存在问题就是将 fancybox 绑定(bind)到当前的 pikachoose 元素 self.anchor
.
使用这种方法,无法知道哪组图像属于 fancybox 画廊(您将需要多个元素共享相同的 rel
属性),因为只有一个 pikachoose image :显示每个图像并动态切换其 href
和src
<a>
内的属性(分别为 <img>
和 .pika-stage
标签)容器。
作为解决方法,您需要在将 html 结构绑定(bind)到 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 元素组,迭代每个 anchor :
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绑定(bind)到同一个选择器 #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
}
注意我们绑定(bind)了 click
事件使用 .on()
(需要 jQuery v1.7+)到 pikachoose 元素 self.anchor
使用手动方法触发 fancybox gallery $.fancybox([group])
.
此解决方法对于 fancybox v1.3.4 或 v2.x 来说同样有效。请参阅DEMO 使用 v1.3.4,即使在 IE7 下也能正常工作;)
关于jquery - Pikachoose/Fancybox 集成 - 灯箱上的导航箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16026145/