Liens précédant/suivant avec la galerie en javascript d'alsa

Bonjour,

Après un post pour l'instant sans succès dans le forum spécifique aux tutoriels, je me tourne vers les spécialistes JavaScript, puisque mon problème va un peu plus loin que le tutoriel en lui même.

J'utilise la galerie photo en javascript disponible dans les tutoriaux d'alsa.

J'aurais voulu ajouter un lien suivant et précédant sous la photo. Mais j'ai un problème pour récupérer le numéro de la photo.

Je pense que mon prolème se situe au niveau de la boucle:

// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	for (var i = 0 ; i < liens.length ; ++i) {
		// Au clique 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
		};
	}

Je pensais pouvoir récupérer la valeur de i au moment du clic. Ensuite, j'aurais pu manipuler cette valeur et créer le lien. Mais malheureusement, quand j'essaie de récupérer ce i, la boucle continue quand même et je me retrouve donc avec le i maximum de mon tableau...

Quelqu'un peut-il m'aider?

Quand tu a trouvé le bon i, tu le sauvegarde dans une variable et tu place l'insctruction break(), qui va couper la boucle (et ça casse ).

En fait si j'ai bien compris le tutoriel, j'ai besoin que la boucle se finisse, car elle va attribuer les actions onclick à tous les liens. Et jusque là, je n'ai pas encore cliqué, donc je ne connais pas le i.

Par contre, j'aimerai au moment du clic récupérer cette valeur. Juste savoir sur quelle image j'ai cliqué, mais en récupérant sa position dans le tableau plutôt que son href par exemple. (dans l'exemple, on récupère this.href et this.title, moi j'aimerais juste la clé du tableau correspondante)

Hello,

Tu peux faire quelque chose du genre :

function clickFn(big_photo, titre_photo, i) {
  return function() {
    // i peut être utilisé ici

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

// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0; i < liens.length; ++i) {
  liens[i ].onclick = clickFn(big_photo, titre_photo, i);
}

Merci ca a l'air de fonctionner. Du moins sous Firefox...

Est-ce que quelqu'un aurait le courage de parcourir mon code pour voir si je n'ai pas utilisé de propriété non-comprise par IE?

Voici mon code:

// Fonction pour créer l'événement onclick sur les vignettes
function displayPics() {
	var photos = document.getElementById('vig');
	var liens = photos.getElementsByTagName('a');			// On récupère tous les liens contenu dans #vig
	var big_photo = document.getElementById('big');

	// Une boucle parcourant l'ensemble des liens contenu dans #gal
	for (i = 0; i < liens.length; ++i) {
	  liens[i ].onclick = showImg(photos, liens, big_photo, i);
	}
}

// Fonction permettant d'afficher l'image et la navigation (lancé seulement lors du clic sur une vignette)
function showImg(photos, liens, big_photo, i) {
	return function() {
		thisImg = i;
		prevImg = i-1;
		nextImg	= i+1;
		lastImg = liens.length-1;
		
		photos.style.display = 'none';
		big_photo.style.display = 'block';
		big_photo.getElementsByTagName('img')[0].src = this.href;
		big_photo.getElementsByTagName('img')[0].alt = 'Image '+nextImg;
		
		if(i>0) {
			big_photo.getElementById('back').getElementsByTagName('a')[0].href = liens[prevImg].href;
			big_photo.getElementById('back').getElementsByTagName('a')[0].onclick = changePics('prev', big_photo, liens);
		} else {
			big_photo.getElementById('back').getElementsByTagName('a')[0].style.display = 'none';
		}
		if(i<lastImg) {
			big_photo.getElementById('next').getElementsByTagName('a')[0].href = liens[nextImg].href;
			big_photo.getElementById('next').getElementsByTagName('a')[0].onclick = changePics('next', big_photo, liens);
		} else {
			big_photo.getElementById('next').getElementsByTagName('a')[0].style.display = 'none';
		}

		return false; // Annulation de l'action réelle du lien
	};
}

// Fonction pour changer l'image et les liens pendant la navigation
function changePics(direction, big_photo, liens) {
	return function() {
		prevImg = thisImg-1;
		nextImg = thisImg+1;
		
		if(direction=='prev') {
			big_photo.getElementsByTagName('img')[0].src = liens[prevImg].href;
			big_photo.getElementsByTagName('img')[0].alt = 'Image '+thisImg;
			thisImg--;
			if(thisImg<1) {
				big_photo.getElementById('back').getElementsByTagName('a')[0].style.display = 'none';
			}
			if(thisImg<lastImg) {
				big_photo.getElementById('next').getElementsByTagName('a')[0].style.display = 'block';
			}
		}
		if(direction=='next') {
			big_photo.getElementsByTagName('img')[0].src = liens[nextImg].href;
			big_photo.getElementsByTagName('img')[0].alt = 'Image '+nextImg;
			thisImg++;
			if(thisImg>lastImg-1) {
				big_photo.getElementById('next').getElementsByTagName('a')[0].style.display = 'none';
			}
			if(thisImg>0) {
				big_photo.getElementById('back').getElementsByTagName('a')[0].style.display = 'block';
			}
		}

	return false; // Annulation de l'action réelle du lien
	};
}


// Appel de la fonction fonction au chargement de la page
window.onload = displayPics;

Merci d'avance.