Pikachoose/Fancybox集成-灯箱上的导航箭头 [英] Pikachoose/Fancybox Integration - navigation arrows on the lightbox

问题描述

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

我正在尝试让灯箱显示下一个和上一个箭头，但不在pikachoose舞台上显示，我遇到了一些麻烦.我试图在脚本的fancybox部分中添加showNavArrows: true的选项，但是它不起作用.因此，然后我尝试使用this: {text: {previous: "Previous", next: "Next" }}在pikachoose上的nav选项进行显示 但我不断收到错误消息，可能是我的语法没有在正确的地方? 有人可以帮忙吗?

这是我正在使用的代码:

$(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
    });
});

解决方案

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

采用这种方法，因为只有一个 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()(需要jQuery v1.7 +)将click事件绑定到 pikachoose 元素self.anchor，以使用手动方法$.fancybox([group]).

对于fancybox v1.3.4或v2.x，此解决方法同样适用.请参阅使用v1.3.4的 DEMO ，即使在IE7上也可以正常使用； )

I'm using the Fancybox integration with Pikachoose as explained here: http://www.pikachoose.com/how-to-fancybox/

I'm trying to get the lightbox to display next and previous arrows but not on the pikachoose stage and I'm having a bit of trouble. I tried to add the options of showNavArrows: true in the fancybox section of the script but it wouldn't work. So then I tried the nav options on pikachoose to display using this: {text: {previous: "Previous", next: "Next" }} but I keep getting an error, possibly my syntax isn't going in the right place? Can someone help please?

this is the code I'm using :

$(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
    });
});

解决方案

The problem with the method explained in http://www.pikachoose.com/how-to-fancybox/ is that you bind fancybox to the current pikachoose element self.anchor.

With that approach, there is no way to know what group of images will belong to a fancybox gallery (you would need more than one element sharing the same rel attribute) because there is just a single pikachoose image : every image is displayed toggling dynamically its href and src attributes (<a> and <img> tags respectively) inside the .pika-stage container.

As a workaround, you would need to built the fancybox group of elements BEFORE binding your html structure to pikachoose (pikachoose will modify the DOM structure)

1). So having this html structure :

 <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). Create the fancybox group of elements iterating through each anchor with this script :

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). Then bind pikachoose to the same selector #pikame. You can use the .end() method to do it over the first decelerated selector without duplicating it ;)

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

Notice that we used the pikachoose option buildFinished: fancy, which actually will fire the fancybox gallery when we click on the big image.

4). Here is the function :

  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
  }

Notice that we bound a click event using .on() (requires jQuery v1.7+) to the pikachoose element self.anchor to fire fancybox gallery using the manual method $.fancybox([group]).

This workaround works equally fine for fancybox v1.3.4 or v2.x. See DEMO using v1.3.4 that seems to work fine even with IE7 ;)

这篇关于Pikachoose/Fancybox集成-灯箱上的导航箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！