2

私はこのライブラリ、Galleriaで遊んでいます。これはかなりきれいです。以下のURLは次のとおりです。

http://devkick.com/lab/galleria/

しかし、キーボード（右、左など）を使用してサムネイル間を移動する方法がわかりません。。誰かがこのライブラリを使用してこれを機能させましたか？

4

4 に答える 4

5 
$(document).bind("keydown", function(e){
  if(e.keyCode== 37){
    $.galleria.prev();
  }else if(e.keyCode== 38){
    $.galleria.next();
  }else if(e.keyCode== 39){
    $.galleria.next();
  }else if(e.keyCode== 40){
    $.galleria.prev();
  }else{
    return true;
  }
  return false;
});

IEではキープレスが機能しないようです。キーダウンに変更しました。これは機能します。

IE 8、Chrome 3、Opera 10、Firefox3.5でテストされたテストページを作成しました。それはそれらすべてで機能します。テストページはこのページに基づいており、上記のコードのみが追加されています。

于 2009-10-03T13:54:09.473 に答える
2

ユーザーはナビゲーションに上下の矢印を使用することが多いため、左右の矢印のみをバインドしますが、上下を使用する場合は、これらの行のコメントを解除できます。

<script type="text/javascript">
$(document).ready(function($) {
    $('ul.gallery_unstyled').addClass('gallery');
    $('ul.gallery').galleria({
        history: false,
        clickNext: true,
        insert: '#main_image',
        onImage: function(image, caption, thumb) {
            // add a title for the clickable image
            image.attr('title', 'Next image >>');
        }
    });
    $(document).keydown(function(e) {
    switch (e.keyCode) {
            case 37: // left arrow
            //case 38: // up arrow
                $.galleria.prev();
                break;
            case 39: // right arrow
            //case 40: // down arrow
                $.galleria.next();
                break;
        }
    });
});

于 2009-10-03T17:59:16.857 に答える
2

私の場合、前の答えはうまくいきませんでした。attachKeyboard()ドキュメントイベントを使用するのではなく、GalleriaAPIの組み込み機能を利用しました。

コードは、ガレリア呼び出しのinitに設定されています。

.galleria（{

extend:function() {
    this.attachKeyboard({
        left: this.prev,
        right: this.next,
        up: function() {
            Galleria.log('up key pressed');
        }
    });
} });

この解決策は、ここのGetSatisfactionフォーラムで見つけたことに注意してください。

これが他の誰かに役立つことを願っています。

于 2011-01-10T03:07:10.147 に答える
1

GetSatisfactionフォーラムからも。

galleria.classic.jsinit関数にこのコードブロックを追加しました

this.attachKeyboard({
  left: this.prev,
  right: this.next
});

チャームのように機能します！

于 2011-08-09T09:42:47.657 に答える