6

我正在使用 Fancybox 与 Pikachoose 的集成，如下所述： http ://www.pikachoose.com/how-to-fancybox/

我试图让灯箱显示下一个和上一个箭头，但不在 pikachoose 舞台上，我遇到了一些麻烦。我试图showNavArrows: true在脚本的 fancybox 部分添加选项，但它不起作用。所以然后我尝试了 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
    });
});
4

2 回答 2

7

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

使用这种方法，没有办法知道哪组图像将属于一个 fancybox 画廊（您需要多个元素共享相同的rel属性），因为只有一个pikachoose图像：每个图像都显示动态切换它href和容器内的src属性（<a>和<img>标签） 。.pika-stage

作为一种解决方法，您需要在将 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
  }

请注意，我们click使用.on()（需要 jQuery v1.7+）将事件绑定到pikachoose元素self.anchor，以使用手动方法触发 fancybox 库$.fancybox([group])。

此解决方法同样适用于 fancybox v1.3.4 或 v2.x。请参阅使用 v1.3.4 的演示，即使使用 IE7 似乎也可以正常工作；）

于 2013-04-16T21:39:40.483 回答
0

JFK 的反应很好，但有一些地方需要纠正：

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

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;
};
于 2016-01-23T10:41:40.957 回答