en utilisant la souris gauche, droite, haut, bas avec galleria javascript

Question

je joue avec cette bibliothèque, Galleria, ce qui est assez propre. voici l'adresse suivante:

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

mais je ne vois pas de toute façon de passer d'une vignette à l'autre avec le clavier (à droite, à gauche, etc.). . Quelqu'un at-il utilisé cette bibliothèque et a obtenu ce travail?

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

Il semble que la touche ne fonctionne pas dans IE. Je l'ai changé pour le clavier, qui fonctionne.

J'ai créé un testpage qui a été testé dans IE 8, Chrome 3, Opera 10 et Firefox 3.5. Cela fonctionne dans tous les cas. Le PageTest est basé sur this page avec seulement le code ci-dessus ajouté.

Answer 2

Je lie uniquement les flèches gauche et droite parce que les utilisateurs utilisent souvent les flèches vers le haut et vers le bas pour la navigation mais vous pouvez décommenter ces lignes si vous souhaitez utiliser de haut en bas:

<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 3

Le les réponses précédentes ne marchaient pas dans mon cas. Plutôt que d'utiliser les événements de document, je tapais dans la construction attachKeyboard() fonctionnalité de l'API Galleria.

Le code est défini dans init pour l'appel galleria.

.galleria ({

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

Notez que j'ai trouvé cette solution dans les Get forums de satisfaction here

J'espère que cela aide quelqu'un d'autre.

Answer 4

Également du Get Satisfaction forums.

Ajout ce bloc de code dans galleria.classic.js fonction init

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

fonctionne comme un charme!