2012-01-30 10 views
0

写真のギャラリーを表示するのにfancyboxを使用しています。しかし、私は最後のスライドにインタラクティブなパズルを入れたいと思っていました。パズルは機能しますが、右または左のパズルピースの一部を選択しようとすると、ナビゲーションボタンが表示され、パズルが重なり、前のスライドに移動したり、最初に戻ったりします。最後のギャラリーのfancybox無効化ボタンの画像

質問: 最後のスライドが表示されるまで、ナビゲーションボタン付き画像ギャラリーを機能させるにはどうすればよいですか?私は右/左矢印とその機能を最後のスライドだけで無効にしたい。
これも可能ですか?ギャラリーの

 $(document).ready(function() { 

    $(".grouped").fancybox({ 

     openEffect    : 'none', 
     closeEffect    : 'none', 
     prevEffect    : 'none', 
     nextEffect    : 'none', 
     closeBtn    : false, 

     helpers : { 
      title : { 
       type : 'inside' 
      } 
     } 
     }); 

}); 

私のクラスは

<a class="grouped" data-fancybox-group="button" href="../theme/images/questions_screen.jpg"> 

で、パズルのためのクラスでは、最後のフレームに到達したとき、あなたは前のとで次を非表示にすることができます

<a class="grouped fancybox.iframe" data-fancybox-group="button" href="../theme/hidden_game/games"> 

答えて

0

ですcss

.fancybox-prev、.fancybox-next display:none;最後のフレームに達するとクラスを超えてしまいます。

+0

を追跡することができ、私は.fancybox.iframe {.fancybox-PREV、.fancybox-次の表示:なし;}を追加し、それが動作しませんでした。私は何か間違っているのですか? – need2nobasis

+0

構文が間違っていた、あなたはそれを追加しています、あなたはjavascriptでそれを行う必要があります、最後のフレームに達したときにそこに条件を入れてこのスタイルを追加してくださいdisplay:none; .fancybox-prevと.fancybox-nextに –

0

あなたは、インデックスによって

$('.fancy-el').fancybox({ 
     afterLoad: function(current) { 
      if (current.index === current.group.length - 1) { 
       current.arrows = false; 
      } 
     } 
}); 

http://jsfiddle.net/x03xqu7t/3/

関連する問題