Galerie photo avec Javascript : peut-on mettre plusieurs galeries ?

Bonjour,

Je sais que pour utiliser un code javascript, il est préférable de connaître le javascript.
Mais je suis débutante, et mon petit cerveau refuse d'aller au delà de l'html-css de base. J'ai pourtant compulsé les cours de JS, mais rien à faire, ça passe pas.

Donc je me débrouille en reprenant des codes déjà fait.

Concernant ce code qui permet de créer une galerie photo, je le comprends à peu près, et je l'ai utilisé en le simplifiant selon mes besoins : ça marche.

Ma question maintenant est : peut-on utiliser ce même code pour créer PLUSIEURS GALERIES sur la même page web.

J'ai essayé mais en vain --- en nommant mes galeries "galerie1", "galerie2", "galerie3",... et en créant des fonctions pour chaque galerie : function displayPics1(), function displayPics2()

Si une galerie marche, l'autre ne marche pas et l'image s'affiche en plein sur une nouvelle page.

Pouvez-vous m'indiquer s'il y a un moyen simple de faire cela ?

Si c'est compliqué, je laisse tomber. Je chercherai d'autres façons de faire.

voici la page sur laquelle je travaille en ce moment :
http://www.iavi-voyageinterieur.net/expo-virtuelle-EN-COURS.html

Je n'ai mis que 2 galeries mais j'aimerais en mettre plus. Ici seule la 2e fonctionne.
Est-ce qu'il faut sortir les variables de la fonction pour les mettre en variable globales ? dans ce cas je ne sais pas comment faire.

MERCI par avance de votre aide.

============VOICI MON CODE (j'ai laissé les commentaires pour m'y retrouver ============

function displayPics1() 
{ 
    var photos = document.getElementById('galerie_mini1') ; 
						// 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 contenu dans galerie_mini 
    var big_photo1 = document.getElementById('big_pict1') ; 
						// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale 
 
     
						// 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_photo1.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 = displayPics1; 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page 

        
		
function displayPics2() 
{ 	
    var photos = document.getElementById('galerie_mini2') ; 
						// 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 contenu dans galerie_mini 
    	var big_photo2 = document.getElementById('big_pict2') ; 
						// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale 
 
     
						// 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_photo2.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 = displayPics2; 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page 

[/i][/i]

Bonjour,

Déjà, félicitations (à prendre au premier degré ): tu dis que le JavaScript ne rentre pas dans ton petit cerveau, mais les modifications que tu as faites au code sont logiques et montrent un début de compréhension. C'est donc plutôt bien parti.

Le code des fonctions est correct (redondant, ce qui n'est pas terrible, mais pour débuter on va dire que ça passe), à une erreur près:
- dans displayPics2 tu as liens[ i ].onclick, ce qui est correct;
- dans displayPics1 tu as liens.onclick ce qui est faux.
(Note: j'ai écrit [ i ] avec des espaces car sinon ça fait des italiques dans le forum, en dehors des blocs de code du moins.)
Pour rappel, dans chacune des deux fonctions, au moment où tu veux utiliser cette variable "liens", elle correspond a un ensemble d'éléments A (liens) de la page, récupérés grâce à la méthode DOM standard element.getElementsByTagName. Ça retourne une sorte de tableau d'éléments, et c'est pourquoi on fait une boucle (for) pour exécuter un code sur chacun des éléments du tableau. Dans cette boucle on a une variable qui nous sert d'index et qui est incrémentée à chaque fois: la variable i. Pour accéder aux éléments du tableau on doit donc écrire liens[ i ]:
- au premier passage de la boucle, ça fait liens[0] (premier élément du tableau);
- au deuxième passage de la boucle, ça fait liens[1] (deuxième élément du tableau);
- au troisième passage de la boucle, ça fait liens[2] (troisième élément du tableau);
- et ainsi de suite jusqu'à la fin.

Bref, j'imagine que c'était juste une faute d'inattention, mais si elle est dans ton "vrai" code il faut la corriger.

Si on prend un peu de recul dans ton script, on s'aperçoit que tu as la structure suivante:

// Je définis la fonction displayPics1:
function displayPics1() {...}
// Voilà, la fonction est définie, mais elle n'est pas encore exécutée.
// Pour l'instant elle est en mémoire.

// Je veux que displayPics1 soit exécutée lors de l'évènement window.onload.
window.onload = displayPics1;
// Cet évènement viendra plus tard, c'est pas tout de suite.
// Je note que "displayPics1" est une référence à ma fonction. C'est une référence,
// donc ça n'exécute pas encore ma fonction. Si j'avais écrit "displayPics1()",
// alors là oui ça aurait exécuté ma fonction, ce qui ne m'aurait pas arrangé ici.
// Je ne détaille pas pourquoi, mais on veut vraiment l'exécuter PLUS TARD.

// Je définis la fonction displayPics2:
function displayPics2() {...}
// Même topo, on n'exécute pas encore.

// Je veux que displayPics2 soit exécutée lors de l'évènement window.onload.
window.onload = displayPics2;

// Voilà, c'est la fin de mon script et pour l'instant rien n'a été exécuté (et tant mieux).

Deux choses à comprendre ici:

1. Lorsque le navigateur lit et interprète ce script JavaScript, il n'exécute aucune fonction car on ne lui a rien demandé d'exécuter. Il va donc continuer son travail, par exemple en lisant d'autres scripts JavaScript, en lisant et analysant le code HTML qui suit, et en téléchargeant d'autres fichiers (feuilles de styles, images...). Une fois qu'il a fini tout ce travail, que tous les éléments de la page sont téléchargés, le navigateur va dire «OK, c'est bon, la page est prête!». Il va alors déclencher l'évènement window.onload.

2. Donc toute la page est chargée, images comprises (les images qu'on a référencées dans l'attribut src des éléments IMG, ou en background CSS par exemple... pas les images indiquées dans les attributs href des éléments A!). Le navigateur va donc regarder quelle est la valeur de windows.onload. Par défaut la valeur est vide: il ne se passe rien. Mais dans ton script tu as modifié cette valeur, deux fois:
- la première fois, tu dis "window.onload est une référence à displayPics1";
- la deuxième fois tu dis "window.onload est une référence à displayPics2", et cette affirmation remplace la première.
Donc le navigateur a pour information "window.onload est une référence à displayPics2". Il va donc exécuter la fonction displayPics2.

Donc, paf, la page est chargée, et displayPics2 s'exécute.
Quant à displayPics1, elle ne s'exécute jamais car... tu ne demandes jamais au navigateur de le faire! À un moment donné tu lui dis «merci d'exécuter displayPics1 à un instant T», et un peu après tu lui dis «ah non, je me suis trompé, en fait à l'instant T on va plutôt exécuter displayPics2... toutes mes confuses».

Je sais pas si c'est clair?

OK, mais il y a une solution?

Tu peux demander au navigateur d'exécuter les deux fonctions lors de window.onload. La syntaxe est un peu compliquée quand on n'a pas l'habitude de JavaScript, ça ressemble à ça:

// On déclare notre première fonction
function displayPics1() {...}

// On déclare notre deuxième fonction
function displayPics2() {...}

// On programme l'exécution de nos deux fonctions pour plus tard:
window.onload = function(){
  displayPics1(); // Attention, ya un piège, ça ne s'exécute pas tout de suite...
  displayPics2(); // ... malgré la syntaxe "maFonction()".
}

Le "piège" dans le code ci-dessus c'est qu'il faut écrire "displayPics1()" et plus "displayPics1" quand on programme l'exécution, MAIS ça n'exécute pas tout de suite displayPics1 puis displayPics2. En fait, on dit que window.onload correspond à une fonction anonyme que l'on déclare. La syntaxe pour déclarer notre fonction anonyme c'est: function(){...}. Cette fonction anonyme n'est pas plus exécutée que les fonctions displayPics1 et displayPics2 qu'on a déclaré plus tôt.

Elle sera donc exécutée plus tard, lors de l'évènement window.onload. Et que dit son contenu? D'abord qu'on exécute displayPics1, puis qu'on exécute displayPics2. Mission accomplie.

OK mais je fais comment si j'ai 15 galeries?

Si on a 15 galeries, on peut faire 15 fonctions, et programmer l'exécution de chacune des 15. Mais c'est pas super optimisé comme manière de faire, bien sûr.

Dans ce cas il faut créer une seule fonction, mais il faut qu'elle puisse s'appliquer à plusieurs éléments ou jeux d'éléments HTML. Ça veut dire qu'il va falloir:
- modifier sérieusement la fonction de départ;
- faire une boucle sur les galeries dans notre fonction (si on a 15 galeries, cette boucle s'exécutera 15 fois, une fois pour chaque galerie);
- ne pas utiliser document.getElementById, vu qu'à chaque fois on va travailler sur des éléments différents.

Là ça devient un peu compliqué donc je vais m'arrêter là, et peut être y revenir dans un autre message.

Alors là, je dois dire un immense merci pour cette réponse détaillée et explicative !

Pour le [ i ], je me demande bien comment il a pu disparaître puisque j'ai fait un simple copier-coller de mon code où l'erreur n'existe pas. Bon... mystère...

Sinon, je comprends pourquoi seule la 2e galerie fonctionne : la 2e fonction prend le pas sur la première et la remplace.

J'ai appliqué ta méthode avec la fonction anonyme qui reprend les 2 fonctions initiales et ça marche : super !

Maintenant, je crois que je suis au maximum de ce que je peux apprendre du JS. Franchement, je n'ai pas l'esprit pour saisir toute cette logique complexe. ça me fait fumer les neurones.
C'est déjà un petit exploit pour moi d'avoir appris les bases de l'html-css toute seule juste avec les cours sur le net, alors que je n'ai aucune formation dans ce domaine.

Donc si je veux mettre plusieurs galeries, je vais tâcher de trouver une autre solution.

En tout cas merci encore pour ta réponse Florent, je suis certaine qu'elle aidera bcp d'autres personnes aussi.