Contrôles clavier sur une galerie photos [Résolu]

[san1981]

Bonjour,

J'utilise le script supersized.js pour afficher une galerie et je voudrais que lorsque je clique sur la flèche gauche, la photo précédente s'affiche et lorsque je clique sur la flèche droite la photo suivante s'affiche (un peu le même principe que sur les nouvelles galeries photo de Facebook).

J'ai essayé les events onkeypress mais je n'y parviens pas. Quelqu'un serait-il doué pour ce type d'evenement clavier?

D'avance merci à tous!

Voici le code de la galerie pour afficher les images:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function(){
	$.fn.supersized.options = {  
        startwidth: 1280,  
	startheight: 742,
	vertical_center: 1,
	slideshow: 1,
	navigation: 1,
	thumbnail_navigation: 0,
	transition: 0,
	pause_hover: 0,
	slide_counter: 1,
	slide_captions: 1,
	slide_interval: 600000,
	slides : [
	{image : './slides/slide_1.jpg', title : '', url : ''},
	{image : './slides/slide_photo1.jpg', title : '', url : ''},
	{image : './slides/slide_photo2.jpg', title : '', url : ''},
	{image : './slides/slide_photo3.jpg', title : '', url : ''},
	{image : './slides/slide_photo4.jpg', title : '', url : ''}
	]
	};
$('#supersized').supersized(); 
});

Le code pour afficher les boutons précédent/suivant où l'événement se fait. Je voudrais faire le même événement mais sans devoir appuyer sur les boutons mais juste en utilisant les touches clavier des flèches gauche et droite.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 $('#nextslide').click(function() {
				    	if($.inAnimation) return false;
					    clearInterval(slideshow_interval);
					    nextslide();
					    if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
					    return false;
				    });
 
				    $('#prevslide').click(function() {
				    	if($.inAnimation) return false;
				        clearInterval(slideshow_interval);
				        prevslide();
				        if(!($.paused)) slideshow_interval = setInterval(nextslide, options.slide_interval);
				        return false;
				    });
				    $('#nextslide').mousedown(function() {
					   	$(this).attr("src", "images/forward.png");
					});
					$('#nextslide').mouseup(function() {
					    $(this).attr("src", "images/forward_dull.png");
					});
					$('#nextslide').mouseout(function() {
					    $(this).attr("src", "images/forward_dull.png");
					});
 
					$('#prevslide').mousedown(function() {
					    $(this).attr("src", "images/back.png");
					});
					$('#prevslide').mouseup(function() {
					    $(this).attr("src", "images/back_dull.png");
					});
					$('#prevslide').mouseout(function() {
					    $(this).attr("src", "images/back_dull.png");
					});

Merci à tous ;-)

[NoSmoking]

Bonsoir,
peut être un truc du style

Code :

1
2
3
4
5
6
7
8
$(window).keydown(function(event){
  if (event.keyCode == '39') {
    // je vais a droite
  }
  if (event.keyCode == '37'){
    // je vais a gauche
  }
});

[san1981]

Envoyé par NoSmoking

Bonsoir,
peut être un truc du style

Code :

Super merci beaucoup! Ca fonctionne parfaitement ;-)