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

我正在使用Fancybox与Pikachoose的集成，如下所述：

我试图让lightbox显示下一个和上一个箭头，但不是在pikachoose舞台上，我遇到了一些麻烦。我试图在脚本的fancybox部分添加

showNavArrows:true

选项，但没有效果。然后我尝试了pikachoose上的导航选项，使用

this:{text:{previous:{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
    });
});

---

中介绍的方法的问题在于，您将fancybox绑定到当前的pikachoose元素

self.anchor

---

使用这种方法，无法知道哪一组图像将属于fancybox库（您需要多个元素共享相同的

rel

属性），因为只有一个pikachoose图像：每个图像都显示为动态切换其

href

和

src

属性（

使用1.3.4版，即使与IE7一起使用，似乎也能正常工作；）
JFK的反应很好，但有一些问题需要纠正：

如果在Pikachoose中启用了旋转木马，使用此方法计算的索引将给出无效索引，因为Pikachoose将通过在
ul
中附加现有的
li
来操作DOM：

  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
  }

解决方案：

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

函数getCurrentIndex（fancyGallery）{
var activeLi=$（“pikame”）.find（“li.active”）；
如果（activeLi.length！=1）{
错误（'（getCurrentIndex）-只有一个映像必须由Pikachoose设置活动类'）；
返回-1；
}
var activeLiHtml0=activeLi[0]；
var activeHref=$（activeLiHtml0）.find（'img'）.attr（'src'）；//不要查找标记，PikaChoose将删除它们
如果（activeHref==null | | activeHref.length==0）{
console.error（'（getCurrentIndex）-无法从所选图像获取href属性'）；
返回-1；
}
对于（变量i=0；i=0）{
调试（'（getCurrentIndex）-找到的索引：'+i）；
返回i；
}
}
错误（'（getCurrentIndex）-未在配置的表中找到此href:；
返回-1；
};

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

  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
  }

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 <a> 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<fancyGallery.length ;i++) {
        var obj = fancyGallery[i];
        if (obj.href.indexOf(activeHref) >= 0){
            console.debug('(getCurrentIndex) - found index: ' + i);
            return i;
        }
    }

    console.error('(getCurrentIndex) - this href: <' + activeHref + '> was not found in configured table');
    return -1;
};