Sujet Précédent Sujet Suivant

Navigation clavier dans une galerie pour passer d'une image à l'autre

zorkzyd Messages postés 7 Date d'inscription jeudi 29 juin 2006 Statut Membre Dernière intervention 6 août 2008 - 17 juil. 2008 à 15:45
zorkzyd Messages postés 7 Date d'inscription jeudi 29 juin 2006 Statut Membre Dernière intervention 6 août 2008 - 6 août 2008 à 14:09
Bonjour à tous,

J'ai créé un code pour ma galerie pour passer d'une image à l'autre avec les flèches du clavier mais ça ne marche pas... pouvez-vous m'aider, m'éclairer, me corriger...?
Si vous avez besoin d'autre morceaux de code que celui en javascript je veux bien vous le donner.
Vous pouvez déjà voir ce que donne ma galerie, mais elle n'est pas encore au point: http://murdentests.awardspace.com/murdengalerie.php?dossier=7

voici mon code javascript:
<script language="javascript">
<!--
function displayPics()
{
if(!document.getElementById('galerie_mini'))return false;
// Si on n'est pas dans une categorie et que l'element galerie_mini n'existe pas
// On retourne FALSE
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenus dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale

// Une boucle parcourant l'ensemble des liens contenus dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
//Affiche la première image
if( i == 0 )
{
big_photo.src = liens[i].href;
big_photo.alt = liens[i].title;
titre_photo.firstChild.nodeValue = liens[i].title;
}
// Au clic sur ces liens
liens[i].onclick = function() {
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.alt = this.title; // On change son titre
titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
return true;
}
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;

function process_keypress() {

if (window.event.type == "keypress" & window.event.keyCode > 0) {

//Et que cet évènement correspond à une pression
//sur la touche "->", on éxécute suivante()

if (window.event.keyCode==39){
suivante();
}

//Si cet évènement est une pression sur la touche "Q"
//alors on éxécute Gauche()
if (window.event.keyCode==37){
precedente();
}
}
return true;
}

//Passer a la photo précédente
function precedente(){
i = i-1;
big_photo.src = liens[i-1].href;
big_photo.alt = liens[i-1].title;
titre_photo.firstChild.nodeValue = liens[i-1].title;
if (i<0){
i=liens.length;
}
}

//Passer a la photo suivante
function suivante(){
i = i+1;
big_photo.src = liens[i+1].href;
big_photo.alt = liens[i+1].title;
titre_photo.firstChild.nodeValue = liens[i+1].title;
if (i>liens.length){
i=0;
}
}

document.onkeypress = process_keypress;

-->
</script>

4 réponses

Réponse 1 / 4
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
18 juil. 2008 à 15:38
Bonjour,
Ajoutes plutôt l'événement keydown au document, sous IExplorer le keypress n'est pas interprété juste à l'enfoncement.

Je te livre une façon de gérer les touches, que j'ai écrite
//--------------------------
function
Fct_Clavier( event){
  var Inc = 0;
  switch( event.keyCode) {

    case KEY_HOME :
      Num = 0;
      break;
    case KEY_END
:
      Num = Max_Photo;
      break;
    case KEY_DOWN :

    case KEY_RIGHT :
    case KEY_SPACE :
    case KEY_PLUS :

      Inc = 1;
      break;
    case KEY_UP :
    case KEY_LEFT
:
    case KEY_MOINS :
      Inc = -1;
      break;
    default
:
      return( true);
      break;
  }
  //-- Demande d'affichage
  Show_Photo( Inc);

  //-- Eviter le scroll des pages

  return( false);
}
A toi de jouer avec...

;O)
0
Réponse 2 / 4
zorkzyd Messages postés 7 Date d'inscription jeudi 29 juin 2006 Statut Membre Dernière intervention 6 août 2008
2 août 2008 à 13:52
m'en sors pas, tu peux me mettre ton code en entier avec le OnkeyDown?
0
Réponse 3 / 4
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
5 août 2008 à 22:02
Bonjour,
l'appel est des plus trivial...
if( document.addEventListener)

  document.addEventListener( 'keydown', Fct_Clavier, false);
else

  document.attachEvent( 'onkeydown', Fct_Clavier);

;O)
0
Réponse 4 / 4
zorkzyd Messages postés 7 Date d'inscription jeudi 29 juin 2006 Statut Membre Dernière intervention 6 août 2008
6 août 2008 à 14:09
Merci! Je testerai ça un de ces 4.. en espérant que ça marche sous IE et FF!

Keep this topic on eyes please!
0

Discussions similaires

vectoriser un logo sous photoshop
cs_babidou -
harleyman37 -

11 réponses
[Photoshop] : Image noir et blanc en image blanc et noir ?
kristoufiol -
titoine2000 -

4 réponses
initialisation du BITMAPINFO pour avoir une palette 256 couleurs!
SyN42 -
chris91 -

2 réponses
Creation d'une Bitmap en niveaux de gris (256 ou 65536)
Carolivier -
BruNews -

6 réponses
comment faire une galerie d'image
Malamute7 -
Malamute7 -

7 réponses
Rejoignez-nous