Pikachoose/Fancybox統合 - ライトボックス

Question

、ここで説明したように、私はPikachooseとFancybox統合を使用しています上のナビゲーション矢印： http://www.pikachoose.com/how-to-fancybox/

私は上の次と前の矢印を表示するためのライトボックスを取得しようとしたがありませんよピカチューズステージと私は少しのトラブルがあります。私はshowNavArrows: trueのオプションをスクリプトのfancyboxセクションに追加しようとしましたが、動作しませんでした。だから、私は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 
    }); 
}); 

Answer 1

の方法に問題がhttp://www.pikachoose.com/how-to-fancybox/で説明を使用すると、現在のpikachoose要素self.anchorにfancyboxを結合することです。

そのアプローチでは、1つだけpikachooseイメージがあるので（あなたが複数の要素に同じrel属性を共有する必要があります）fancyboxギャラリーに属します画像のどのグループを知る方法はありません。すべてのは、 .pika-stageコンテナ内に、href属性とsrc属性（それぞれ<a>と<img>タグ）を動的に切り替えるイメージが表示されます。

は回避策として、あなたは）

1（DOM構造を変更しますpikachoose）pikachooseにあなたのHTML構造を結合 BEFORE要素の建てfancyboxグループする必要があります。したがって、この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）。次に、ピカチョウを同じセレクタ#pikameにバインドします。 ）我々は上をクリックしたときに、実際にfancyboxギャラリーを起動しますpikachooseオプションbuildFinished: fancyを、使用

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 

お知らせを、あなたはそれを複製することなく、第1減速セレクタの上にそれを行うには.end()メソッドを使用することができます大きなイメージ。

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イベントをバインド手動による方法$.fancybox([group])を使用してギャラリーをfancybox発射するpikachoose要素self.anchorに（jQueryのV1.7の+が必要です）。

この回避策は、fancybox v1.3.4またはv2.xでも同じように機能します。カルーセルは、これを使用してPikachoose、計算されたインデックスが有効になっていれば

：）

Answer 2

JFK応答素晴らしいですが、修正するものがある。でも、IE7で正常に動作するようv1.3.4を使用してDEMOを参照してください。

var pikaindex = $("#pikame").find("li.active").index(); 

ソリューション：

01 pikachooseは、DOMを操作するbeacause方法は li ulで既存追加することによって、あなたに無効なものを与えます