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