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

$(document).ready(function () {
    var a = function (self) {
        self.anchor.fancybox({
            transitionIn: elastic,transitionOut: elastic,speedIn: 600,speedOut: 200,overlayShow: false
        });
    };
    $("#@L_616_1@me").@L_616_1@Choose({
        showCaption: false,buildFinished: a,autoPlay: false,transition: [0],speed: 500,showCaption: false
    });
});

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

使用这种方法,无法知道哪些图像组将属于fancybox图库(您需要多个元素共享相同的rel属性),因为只有一个@L_616_1@choose图像：每个图像都@L_489_3@为动态切换.@L_616_1@-stage容器内的href和src属性(分别为< a>和< img>标记).

作为一种解决方法,您需要在将html结构绑定到@L_616_1@choose之前构建fancybox元素组(@L_616_1@choose将修改DOM结构)

1).所以有这个HTML结构：

<div class="@L_616_1@choose">
    <ul id="@L_616_1@me">
        <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 () {

  $("#@L_616_1@me").find("a").each(function(i){
    // buidl fancybox gallery group
    fancyGallerY[i] = {"href" : this.href,"title" : this.titlE};
  });

}); // ready

3).然后将@L_616_1@choose绑定到相同的选择器#@L_616_1@me.您可以使用.end()方法在第一个减速选择器上执行它而不复制它;)

var fancyGallery = []; // fancybox gallery group
$(document).ready(function () {
  // build fancybox group
  $("#@L_616_1@me").find("a").each(function(i){
      // buidl fancybox gallery
      fancyGallerY[i] = {"href" : this.href,"title" : this.titlE};
  }).end().@L_616_1@Choose({
      autoPlay : false,// optional
      // bind fancybox to big images element after @L_616_1@choose is built
      buildFinished: fancy
   }); // @L_616_1@Choose
}); // ready

请注意,我们使用了@L_616_1@choose选项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 @L_616_1@index = $("#@L_616_1@me").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": @L_616_1@index // start with the corresponding thumb index
      });
      return false; // prevent default and stop propagation
     }); // on click
  }

请注意,我们使用.on()(需要jQuery v1.7)将点击事件绑定到@L_616_1@choose元素self.anchor,以使用手动方法$.fancybox([group])触发fancybox库.

对于fancybox v1.3.4或v2.x,此解决方法同样适用.使用v1.3.4参见DEMO,即使使用IE7也可以正常工作;)