Discussion :

[Badaboumpanpan]

Bonjour,

Linux Pratique n°33 proposait de faire sa galerie photo comme suit :

HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="galerie">
    <div id="minis">
<!--Attention, les chemins et noms des photos sont à remplacer par vos propres fichiers!!-->
        <div class="miniBox"><a href="photos_galerie/cascade.jpg" title="La cascade du Nideck"><img src="photos_galerie/miniatures/cascade_small.jpg" alt="cascade du Nideck"></a></div>
        <div class="miniBox"><a href="photos_galerie/foret.jpg" title="Chemin forestier au printemps"><img src="photos_galerie/miniatures/foret_small.jpg" alt="foret au printemps"></a></div>
    </div>
 
    <div id="photoBox">
        <h2>La cascade du Nideck</h2>
        <p><img id="img_originale" src="photos_galerie/cascade.jpg" alt="cascade du Nideck" title="La cascade du Nideck"></p>
    </div>
 
</div>

Avec le JavaScript suivant :

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
24
25
26
27
28
29
30
31
32
33
34
function display_img()
 
{
	// On assigne à la variable "links" tous les éléments de la page qui ont un <a> pour balise, soit les liens, ce qui correspond à toutes les photos de notre galerie :
	var links = document.getElementsByTagName('a');
 
	// On récupère l'élément ayant pour identifiant "img_originale" (c'est notre photo en taille normale) que l'on affecte à la variable "big_photo" :
	var big_photo = document.getElementById('img_orig'); 
 
	// On récupère le titre de la photo de taille normale, que l'on affecte à la variable "titre-photo" :
	var titre_photo = document.getElementsByTagName('h2')[0];	
 
	// On effectue une boucle parcourant l'ensemble des liens contenu dans "minis" :
	for (var i = 0 ; i < links.length ; ++i) {
 
		// Dès que l'utilisateur clique sur ces liens :
		links[i].onclick = function() {		
 
			// On change l'attribut src de la grande image en le remplaçant par la valeur du lien :
			big_photo.src = this.href;
			// De même pour le texte alternatif :
			big_photo.alt = this.alt;
			// De même pour le commentaire info-bulle :
			big_photo.title = this.title;
			// On change le titre h2 de la grande photo :
			titre_photo.firstChild.nodeValue = this.title;
			// Et on s'assure que l'action réelle du lien ne sera pas exécutée :
			return false;
		};
	}
}
 
// Enfin, on appelle la fonction "display_img" au chargement de la page :
window.onload = display_img;

Bien. J'aurais voulu l'adapté à une galerie avec plusieurs pages. Dont Bouton Précédent et Suivant qui vont bien.

Mais !!! Mon JavaScript s'applique à toute les balise <a> !!!...

N'y connaissant pas grand chose en Javascript, mais croyant bien faire, j'ai mis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class=photo href....

et remplacé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var links = document.getElementsByTagName('a');

par

var links = document.getElementById('photo');

Mais ca ne marche pas...

Quelqu'un aurait-il une idée ?