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

Question

我正在使用 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 绑定(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 下也能正常工作;)