6

ここで説明されているように、Fancybox と Pikachoose の統合を使用しています: http://www.pikachoose.com/how-to-fancybox/

ライトボックスに次と前の矢印を表示させようとしていますが、ピカチュウステージでは表示されず、少し問題があります。スクリプトの fancybox セクションにのオプションを追加しようとしましshowNavArrows: trueたが、うまくいきませんでした。それで、pikachoose で nav オプションを使用して表示しようとしました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
    });
});
4

2 に答える 2

7

http://www.pikachoose.com/how-to-fancybox/で説明されている方法の問題は、現在のpikachoose要素に fancybox をバインドすることですself.anchor。

そのアプローチでは、fancybox ギャラリーに属する画像のグループを知る方法はありません (同じrel属性を共有する複数の要素が必要になります)。 pikachoose 画像は 1 つしかないためです。コンテナ内の属性 (およびタグ) 。hrefsrc<a><img>.pika-stage

回避策として、 html 構造をpikachooseにバインドする前に、fancybox グループの要素を構築する必要があります( 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を同じ selector にバインドし#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
  }

(jQuery v1.7+ が必要) を使用してclickイベントをpikachoose要素にバインドし、手動メソッドを使用して fancybox ギャラリーを起動していることに注意してください。.on()self.anchor$.fancybox([group])

この回避策は、fancybox v1.3.4 または v2.x で同様に機能します。IE7 でも問題なく動作するように見える v1.3.4 を使用したDEMOを参照してください ;)

于 2013-04-16T21:39:40.483 に答える
0

JFK の応答は素晴らしいですが、修正すべき点があります。

カルーセルが Pikachoose で有効になっている場合、このメソッドを使用して計算されたインデックスは無効なものになり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;
};
于 2016-01-23T10:41:40.957 に答える