Discussion :

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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]

Bonsoir,
peut être un truc du style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Super merci beaucoup! Ca fonctionne parfaitement ;-)