Navigation au clavier [Résolu]

[fourmizen]

Bonjour à tous,

voici un petit script que j'ai écrit pour naviguer au clavier dans un tableau contenant des images (en gros faire défiler les images d'une gallerie ^^).

Voici le code html :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="album">
  <tr>
 
		            <td>
                <div class="imgprotect" style="width:399px;height:600px"></div>
                <img src="/img/photos/portrait/600/portrait-1.jpg" class="photo" id="photo1" alt="portrait-1" />            </td>
 
                     <td>
                <div class="imgprotect" style="width:399px;height:600px"></div>
                <img src="/img/photos/portrait/600/portrait-2.jpg" class="photo" id="photo2" alt="portrait-2" />            </td>
                     <td>
                <div class="imgprotect" style="width:399px;height:600px"></div>
                <img src="/img/photos/portrait/600/portrait-3.jpg" class="photo" id="photo3" alt="portrait-3" />            </td>
                     <td>
                <div class="imgprotect" style="width:399px;height:600px"></div>
 
                <img src="/img/photos/portrait/600/portrait-4.jpg" class="photo" id="photo4" alt="portrait-4" />            </td>
                     <td>
                <div class="imgprotect" style="width:399px;height:600px"></div>
                <img src="/img/photos/portrait/600/portrait-5.jpg" class="photo" id="photo5" alt="portrait-5" />            </td>          
 
  </tr>
</table>

et le JS :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var KeyFocus = $("#album td:first-child");
 
$(window).keyup(function(event) {
 
	if (event.keyCode == '37') { //Gauche
 
			var NeedScroll = KeyFocus.prev().width()-20;
			$('html').animate({scrollLeft:NeedScroll}, "slow");
			var KeyFocus = KeyFocus.prev();
 
	} else if(event.keyCode == '39') { //Droite
 
			var Offset = KeyFocus.next().offset();
			var NeedScroll = Offset.left - 230;
			$('html').animate({scrollLeft:NeedScroll}, "slow");
			var KeyFocus = KeyFocus.next();
 
	}
 
});

Le problème c'est que KeyFocus n'est pas déclaré dans les conditions...Et je n'arrive pas à enregistrer Keyfocus à la fin de la condition avec l'élément next ou prev (ba oui sinon on navigue seulement d'avant en arrière sur deux images ^^).

Donc ce qu'il faudrait :

1- Keyfocus déclaré dans les conditions
2- Enregistrement de la nouvelle valeur de KeyFocus une fois passé à l'élément prev ou next

Des idées sur comment faire ça?

[danielhagnoul]

Bonsoir

Si vous voulez modifier la valeur de KeyFocus il ne faut pas mettre "var" qui déclare une nouvelle variable.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var KeyFocus = $("#album td:first-child");

$(window).keyup(function(event) {

	if (event.keyCode == '37') { //Gauche

			var NeedScroll = KeyFocus.prev().width()-20;
			$('html').animate({scrollLeft:NeedScroll}, "slow");
			var KeyFocus = KeyFocus.prev();
	
	} else if(event.keyCode == '39') { //Droite

			var Offset = KeyFocus.next().offset();
			var NeedScroll = Offset.left - 230;
			$('html').animate({scrollLeft:NeedScroll}, "slow");
			var KeyFocus = KeyFocus.next();
	}
	
});

[fourmizen]

Super! Merci beaucoup!

Ca marche très bien pour aller vers la droite mais à gauche ça fonctionne pas très bien.

Je n'avais pas utilisé la méthode offset car quand c'est en négatif ça ne semble pas marcher...