Clever Geek Handbook

Using mouse left, right, up, down with galleria javascript

I am playing around with this Galleria library which is pretty neat. here is the url below:

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

but I still can't navigate from one sketch to another using the keyboard (right, left, etc.). has anyone used this library and got this working?

+2


source to share


4 answers 


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

Keypress doesn't seem to work in IE. I changed it to keydown which works.



I created a test page that was tested in IE 8, Chrome 3, Opera 10 and Firefox 3.5. He works in all of them. The testing page is based on this page only with the above code added.

+5


source


I only bind left and right arrows because users often use up and down arrows to navigate, but you can uncomment these lines if you want to use up and down:

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


+2


source


The previous answers were not followed in my case. Instead of using document events, I used the built-in functionality of attachKeyboard()

the Galleria API.

The code is set in init to call galleria:

.galleria ({

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

Please note that I found this solution on the Get Satisfaction forums here .

I hope this helps someone else.

+2


source


Also from the Get Satisfaction forums .

Added this block of code to galleria.classic.js init function

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

Works like a charm!

+1


source






More articles:


All Articles