Une galerie d'image

**garona** · 16/06/2011, 15h11

Bonjour

voila je suis en train de créer une galerie d'image pour un site
une partie de la galerie a été prise sur le net, et j'essaye d'améliorer cette galerie

voici le code :

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
 
 
function displayPics() 
{ 
    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 contenu 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 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 
        }; 
    } 
}

Celui ci marche très bien,
de mon côté j'ai rajouter 2 bouton

Code :

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

1
2
3
 
<input type="button" id="Droite" style="border:0px solid; background:url(Images/logo_files/FlecheGauche.gif) center; height:40pt; width:60pt;" />
<input type="button" id="Gauche" style="border:0px solid; background:url(Images/logo_files/FlecheDroite.gif) center ; height:40pt; width:60pt;" />

et là le javascript
je préviens, je n'ai pas réellement appris le javascript
j'ai tout de même essayé puisque c'est avant tout de la logique :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
 
function changePics()
{
	var droite = document.getElementById('Droite');
	var big_photo = document.getElementById('big_pict') ;
	var gauche = document.getElementById('Gauche');
	var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
	var i=0;
	droite.onclick
	{
	i++;
	}
	gauche.onclick
	{
	i--;
	}
	if (i==0)
	{
	big_photo.src='Images/Locaux/Accueil.jpg';
	titre_photo.firstChild.nodeValue = 'Accueil';
	}
	if (i==1)
	{
	big_photo.src='Images/Locaux/Entree.jpg';
	titre_photo.firstChild.nodeValue = 'Entree';
	}
	if (i==2)
	{
	big_photo.src='Images/Locaux/Exterieur.jpg';
	titre_photo.firstChild.nodeValue = 'Exterieur';
	}
	if (i==3)
	{
	big_photo.src='Images/Locaux/parking.jpg';
	titre_photo.firstChild.nodeValue = 'Parking';
	}
	if (i==4)
	{
	big_photo.src='Images/Locaux/Chambre.jpg';
	titre_photo.firstChild.nodeValue = 'Chambre' ;
	}
	if (i==5)
	{
	big_photo.src='Images/Locaux/Salleamanger.jpg';
	titre_photo.firstChild.nodeValue ='Salle à Manger';
	}
}