используя мышь влево, вправо, вверх, вниз с помощью Galleria Javascript

Question

Я играю с этой библиотекой, Galleria, которая довольно аккуратна. вот URL ниже:

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

но я все равно не вижу перехода с одного эскиза на другой с помощью клавиатуры (справа, слева и т. Д.) , Кто-нибудь использовал эту библиотеку и получил это работает?

Answer 1

$(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. Я изменил его на keydown, который работает.

Я создал тестовую страницу , которая была протестирована в IE 8, Chrome 3, Opera 10 и Firefox 3.5. Это работает во всех из них. Тестовая страница основана на этой странице с добавлением только кода выше.

Answer 2

Предыдущие ответы не сработали в моем случае. Вместо того, чтобы использовать события документа, я использовал встроенную функциональность attachKeyboard() API Galleria.

Код установлен в init для вызова галереи:

.galleria ({

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

Обратите внимание, что я нашел это решение на форумах Получить удовлетворение здесь .

Надеюсь, это поможет кому-то еще.

Answer 3

Я связываю только стрелки влево и вправо, потому что пользователи часто используют стрелки вверх и вниз для навигации, но вы можете раскомментировать эти строки, если хотите использовать вверх и вниз:

<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;
        }
    });
});

Answer 4

Также с форумов Get Satisfaction .

Добавлен этот блок кода в функцию инициализации galleria.classic.js

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

Работает как шарм!