Pikachoose /集成的fancybox - 在收藏夹

Question

我使用的fancybox的整合与Pikachoose作为解释这里导航箭头： http://www.pikachoose.com/how-to-fancybox/

我试图让灯箱显示下一个和以前的箭，但不上pachachoose阶段，我有一些麻烦。我试图在脚本的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属性（分别为<a>和<img>标签）。

作为一种变通方法，您将需要建造的的fancybox组元素之前你的HTML结构结合pikachoose（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 
    } 

通知我们结合使用.on()一个click事件（需要的jQuery V1.7 +）到pikachoose元件self.anchor使用手动方法$.fancybox([group])火的fancybox画廊。

此解决方法对fancybox v1.3.4或v2.x同样适用。见DEMO使用V1.3.4，似乎工作，即使IE7罚款;）

Answer 2

JFK反应是伟大的，但也有一些是要正确：

如果转盘在Pikachoose启用，使用这种计算指数方法会给你一个无效，东阳pikachoose将操作DOM通过附加现有li在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; 
};