Pikachoose / Fancybox集成 – 灯箱上的导航箭头

我正在使用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 }); }); 

Answer 1

http://www.pikachoose.com/how-to-fancybox/中解释的方法的问题是您将fancybox绑定到当前的pikachoose元素self.anchor 。

使用这种方法，无法知道哪些图像组将属于fancybox图库（您需要多个元素共享相同的rel属性），因为只有一个pikachoose图像：每个图像都显示为动态切换.pika-stage容器中的href和src属性（分别为和标记）。

作为一种解决方法，您需要在将html结构绑定到pikachoose 之前构建fancybox元素组（ pikachoose将修改DOM结构）

1）。 所以有这个HTML结构：

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）。 这是function：

  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 +）将click事件绑定到pikachoose元素self.anchor以使用手动方法$.fancybox([group])来触发fancybox图库。

对于fancybox v1.3.4或v2.x，此解决方法同样适用。 使用v1.3.4看到DEMO ，即使使用IE7也可以正常工作;）

Answer 2

JFK的反应非常好，但还有一些问题需要纠正：

如果在Pikachoose中启用了轮播，则使用此方法计算的索引会给您一个无效的索引，因为pikachoose会通过在ul附加现有的li来操作DOM：

 var pikaindex = $("#pikame").find("li.active").index(); 

方案：

 function getCurrentIndex(fancyGallery) { var activeLi = $(""#pikame").find("li.active"); if (activeLi.length != 1) { console.error('(getCurrentIndex) - only one image must have an active class set by Pikachoose'); return -1; } var activeLiHtml0 = activeLi[0]; var activeHref = $(activeLiHtml0).find('img').attr('src'); // do not look for  tags, PikaChoose will remove them if (activeHref === null || activeHref.length == 0) { console.error('(getCurrentIndex) - can not get href attribute from selected image'); return -1; } for (var i=0 ; i= 0){ console.debug('(getCurrentIndex) - found index: ' + i); return i; } } console.error('(getCurrentIndex) - this href: <' + activeHref + '> was not found in configured table'); return -1; };