Excusez-moi de ressortir cette discussion mais je bloque sur un point en javascript alors que je suis sur le point de finaliser.
J’ai utilisé le
tuto que Marc a trouvé sur Alsa pour créer une petite galerie. Voir un exemple ici
http://www.architecture-gambino.com/v2/index.php?id=3
La galerie en elle-même fonctionne à merveille et j’ai voulu coller à la maquette de ma graphiste en ajoutant un lien "Agrandir l’image" pour voir l’image en grand format, en utilisant lightbox.
Mon problème survient lorsque je souhaite changer le href du lien "Agrandir l’image". En effet, ce href doit être changé pour chaque clic fait sur les miniatures (ex : si j’affiche l’image 2, je dois mettre un lien vers me grand format de l’image 2).
Voici le script initial :
function displayPics()
{
var photos = document.getElementById('galerie-rea');
// On récupère l'élément ayant pour id galerie-rea (ul)
var liens = photos.getElementsByTagName('a');
// On récupère dans une variable tous les liens contenu dans galerie_mini
var photo_centre = document.getElementById('img-centre');
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
var zoom = document.getElementById('zoom-pict');
// Une boucle parcourant l'ensemble des liens contenu dans galerie-rea
for (var i = 0; i < liens.length; ++i) {
// Au clique sur ces liens
liens[i].onclick = function() {
photo_centre.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
et voici le script modifié :
function displayPics()
{
// On récupère l'élement contenant l'image du centre
var photo_centre = document.getElementById('img-centre');
// On récupère l'élément ayant pour id galerie-rea (ul)
var photos = document.getElementById('galerie-rea');
// On récupère dans une variable tous les liens contenu dans galerie_mini
var liens = photos.getElementsByTagName('a');
// On récupère le lien qui ouvre lightbox (image grand format)
var zoom = document.getElementById('zoom-pict');
// On crée le tableau qui stock les liens vers les images grand format
var grandes = [];
// On remplit le tableau
grandes[0] = "[(base_url)]assets/images/projets/[[DocEnCours]]/picto1-b.jpg";
grandes[1] = "[(base_url)]assets/images/projets/[[DocEnCours]]/picto2-b.jpg";
grandes[2] = "[(base_url)]assets/images/projets/[[DocEnCours]]/picto3-b.jpg";
// Une boucle parcourant l'ensemble des liens contenus dans galerie-rea permet de modifier l'image du centre et le href de #zoom-pict
for (var i = 0; i < liens.length; ++i) {
// Au clique sur ces liens
liens[i].onclick = function() {
photo_centre.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
zoom.href = grandes[i];
return false; // Et pour finir on inhibe l'action réelle du lien}
}
}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
Grosso modo, je crée un nouveau tableau grandes[] dans lequel je stocke les urls de mes images grand format et dans la boucle for, je modifie le href de mon lien en fonction du i...
Ca vous parait logique ?? et ben ça ne marche pas ! Si je laisse grandes[ i ] (dans la boucle), le href = undefined
Alors que si je mets grandes[0], il m’affiche bien le lien vers le grand format de l’image 1.
Donc, j’en conclue que le problème vient du i... mais je ne sais pas pourquoi.
Alors j’en appelle à vous et vot’ bon coeur !
Mes appels au secours sont restés sans réponse sur le HUB et sur Alsa, je suis triste !
