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

问题描述

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

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

这是我正在使用的代码:

$(document).ready(function () {var a = 函数(自我){self.anchor.fancybox({过渡:弹性，过渡输出:弹性，速度:600，速度输出:200，覆盖显示:假});};$("#pikame").PikaChoose({显示标题:假，构建完成:一个，自动播放:假，过渡:[0]，速度:500，显示标题:假});});

解决方案

http:///www.pikachoose.com/how-to-fancybox/ 是将fancybox 绑定到当前的pikachoose 元素self.anchor.

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

作为一种解决方法，您需要在 BEFORE 将您的 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 画廊组$(文档).ready(函数 () {$("#pikame").find("a").each(function(i){//建立fancybox画廊组fancyGallery[i] = {"href" : this.href, "title" : this.title};});});//准备好

3).然后将 pikachoose 绑定到同一个选择器 #pikame.您可以使用 .end() 方法在第一个减速选择器上执行此操作，而无需复制它；)

var fancyGallery = [];//fancybox 画廊组$(文档).ready(函数 () {//建立fancybox组$("#pikame").find("a").each(function(i){//建立fancybox画廊fancyGallery[i] = {"href" : this.href, "title" : this.title};}).end().PikaChoose({autoPlay : false,//可选//构建 pikachoose 后将 fancybox 绑定到大图像元素构建完成:花式});//皮卡选择});//准备好

注意我们使用了pikachoose选项buildFinished: fancy，当我们点击大图时，它实际上会触发fancybox画廊.

4).这是函数:

 var fancy = function (self) {//将点击事件绑定到大图self.anchor.on("点击", function(e){//查找对应缩略图的索引var pikaindex = $("#pikame").find("li.active").index();//从对应的索引开始打开 ​​fancybox 库$.fancybox(fancyGallery,{//花式框选项"cyclic": true,//仅适用于 fancybox v1.3.4，对于 v2.x 使用 "loop""index": pikaindex//从对应的拇指索引开始});返回假；//防止默认并停止传播});//点击时}

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

此解决方法同样适用于 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屋！