boucle foreach

**fofyy** · 26/02/2008, 13h19

bonjour a tous,
j ai un probleme je fais un site où doit faire apparaitre des references qui viennent d une base de données mysql dont plusieurs photos que j ai mis dans une galerie javascrit.
j ai regarde sur dans plusieurs forums et j ai trouve le code pour faire ma galerie d image le probleme c est que cela marche uniquement pour la premiere reference !!!

merci pour votre aide

voici mon code javascript :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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.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;
};
}
}
window.onload = displayPics;
 
code html/php :
 
foreach($reference as $r)
{
?>
 
<div class="unereference">
 
<div class="gauche">
<h4><?echo $r->titre_ref;?></h4>
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict" src="/<?echo $r->photo1_ref;?>" alt="Photo 1 en taille normale" /></dd>
</dl>
<img id="preload" src="/imgages/img-presentation.jpg">
<img id="preload" src="/imgages/batindus2.jpg">
<img id="preload" src="/imgages/maisonpierre.jpg">
</div><!--fermeture div gauche-->
 
<div class="droite">
<ul id="galerie_mini">
 
<a href="/<?echo $r->photo2_maxi;?>"><img class="detail" src="/<?echo $r->photo2_mini;?>" alt="Le titre de la photo 1" /></a>
<a href="/<?echo $r->photo3_maxi;?>"><img class="detail" src="/<?echo $r->photo3_mini;?>" alt="Le titre de la photo 2" /></a>
<a href="/<?echo $r->photo4_maxi;?>"><img src="/<?echo $r->photo4_mini;?>" alt="Le titre de la photo 3" /></a>
</ul>
 
<ul class="description">
<li><strong>Client :</strong><?echo $r->client_ref;?></li>
<li><strong>Lieu du chantier : </strong><?echo $r->lieu_ref;?></li>
 
<li><strong>Année de réalisation : </strong><?echo $r->annee_ref;?></li>
<li><strong>Montant des travaux TTC : </strong><?echo $r->montant_ref;?></li>
<li><strong>Description : </strong><?echo $r->description_ref;?></li>
</ul><!--fermeture ul description-->
</div><!--fermeture div droite-->
 
<p>******************************************************************************************************************************************</p>
</div> <!----fermeture div unereference----->
<?php
}

**SpaceFrog** · 26/02/2008, 13h25

foreach n'est pas du javascript mais du php ...

et puis il eut été intéressant d'avoir le javascript sans le php ...

**marcha** · 26/02/2008, 13h55

Salut,

Ici tu écrit: liens.onclick = function() {

Tu applique le onclick à un tableau javascript ???

tu devrais essayer

liens[i].onclick = function() {

pour appliquer le onclick à chaque élément du tableau

**fofyy** · 27/02/2008, 08h50

d accord je vais esssayer de mettre le tableau !!
merci de m aider en tous cas

dsl le tableau ne fonctionne pas !!

salut SpaceFrog,
le probleme ne vient pas de mon php vu que les informations de la base s affiche correctement et que les petites images aussi!!! Donc je pense que ca vient de mon javascript !!!

et que veux tu dire sans php ?? tout mettre en javascript ???

merci de m aider !!

**SpaceFrog** · 27/02/2008, 09h11

non pas tout mettre en javascript ...
je veux dire ne mettre que le javascript ...

sur ta page html lorsque tu la visualise tu fait afficher source et là tu copie le code que php aura généré ...

**fofyy** · 27/02/2008, 09h28

a ok !!

ben voila le code alors :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<div id="centre">	
						<div id="titre">
							<div id="gauche">
							<h2 id="jaune">Bâtiment public</h2>
							</div>
							<div id="droite">
							<h3>Nos réalisations</h3><br />
							</div>
						</div>		
 
<div class="unereference">
 
		<div class="gauche">
			<h4>Mairie de Nyons</h4>
			<dl id="photo">
			<dt>Titre de la photo 1</dt>
			<dd><img id="big_pict" src="/images/batindus2.jpg" alt="Photo 1 en taille normale" /></dd>
			</dl>
		</div><!--fermeture div gauche-->	
 
		<div class="droite">
			<ul id="galerie_mini">
 
			<a href="/images/batindus2.jpg"><img class="detail" src="/images/carre_place.jpg" alt="Le titre de la photo 1" /></a>
				<a href="/images/maisonpierre.jpg"><img class="detail" src="/images/carre_mas.jpg" alt="Le titre de la photo 2" /></a>
				<a href="/images/img-presentation.jpg"><img src="/images/carre_contrustion.jpg" alt="Le titre de la photo 3" /></a>
			</ul>
 
			<ul class="description">
				<li><strong>Client :</strong>Ville de Nyons</li>
				<li><strong>Lieu du chantier : </strong>Nyons</li>
 
				<li><strong>Année de réalisation : </strong>2004</li>
				<li><strong>Montant des travaux TTC : </strong>309875</li>
				<li><strong>Description : </strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vitae justo molestie dui egestas aliquet. Vestibulum fermentum luctus nulla.</li>
			</ul><!--fermeture ul description-->
		</div><!--fermeture div droite-->	
 
<p>******************************************************************************************************************************************</p>
</div> <!----fermeture div unereference----->
 
<div class="unereference">
 
		<div class="gauche">
			<h4>Piscine municipale</h4>
			<dl id="photo">
			<dt>Titre de la photo 1</dt>
			<dd><img id="big_pict" src="/images/batindus.jpg" alt="Photo 1 en taille normale" /></dd>
			</dl>
		</div><!--fermeture div gauche-->	
 
		<div class="droite">
			<ul id="galerie_mini">
 
			<a href="/images/batindus2.jpg"><img class="detail" src="/images/carre_place.jpg" alt="Le titre de la photo 1" /></a>
				<a href="/images/maisonpierre.jpg"><img class="detail" src="/images/carre_mas.jpg" alt="Le titre de la photo 2" /></a>
				<a href="/images/img-presentation.jpg"><img src="/images/carre_contrustion.jpg" alt="Le titre de la photo 3" /></a>
			</ul>
 
			<ul class="description">
				<li><strong>Client :</strong>Ville de montelimar</li>
				<li><strong>Lieu du chantier : </strong>montelimar</li>
 
				<li><strong>Année de réalisation : </strong>2006</li>
				<li><strong>Montant des travaux TTC : </strong>400000</li>
				<li><strong>Description : </strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vitae justo molestie dui egestas aliquet. Vestibulum fermentum luctus nulla.</li>
			</ul><!--fermeture ul description-->
		</div><!--fermeture div droite-->	
 
<p>******************************************************************************************************************************************</p>
</div> <!----fermeture div unereference----->
 
<div class="unereference">
 
		<div class="gauche">
			<h4>batiment public</h4>
			<dl id="photo">
			<dt>Titre de la photo 1</dt>
			<dd><img id="big_pict" src="/images/batpublic4.jpg" alt="Photo 1 en taille normale" /></dd>
			</dl>
		</div><!--fermeture div gauche-->	
 
		<div class="droite">
			<ul id="galerie_mini">
 
			<a href="/images/batindus2.jpg"><img class="detail" src="/images/carre_place.jpg" alt="Le titre de la photo 1" /></a>
				<a href="/images/maisonpierre.jpg"><img class="detail" src="/images/carre_mas.jpg" alt="Le titre de la photo 2" /></a>
				<a href="/images/img-presentation.jpg"><img src="/images/carre_contrustion.jpg" alt="Le titre de la photo 3" /></a>
			</ul>
 
			<ul class="description">
				<li><strong>Client :</strong>etat</li>
				<li><strong>Lieu du chantier : </strong>valence</li>
 
				<li><strong>Année de réalisation : </strong>2007</li>
				<li><strong>Montant des travaux TTC : </strong>23456.5</li>
				<li><strong>Description : </strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vitae justo molestie dui egestas aliquet. Vestibulum fermentum luctus nulla.</li>
			</ul><!--fermeture ul description-->
		</div><!--fermeture div droite-->	
 
<p>******************************************************************************************************************************************</p>
</div> <!----fermeture div unereference----->
					<div id="retour">
						<a href="/pages/activites/batiment_industrie/">&lt;&lt;&lt; Retour</a>
					</div>

**SpaceFrog** · 27/02/2008, 09h35

un id doit être unique sur la page !!!!
tu dois avoir un id différent pour chaque pbjet !

**fofyy** · 27/02/2008, 09h43

je suis d accor avec toi mais j ai deja essaye de replacer les id par des class mais apres ma galerie ne fonctionne plus . et j ai egalemment replacé les document.getElementById('') par document.getElementByClass('') mais ca ne marche pas !!

**SpaceFrog** · 27/02/2008, 09h48

normal getElementByClass n'existe pas .. il te faudra le code toi même si tu vuex l'utiliser ...

mais à toi d'utiliser des id rationnels en les concaténant avec ton php ...

Code :

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

1
2
id="galerie_mini_1"
id="galerie_mini_2" ...

**fofyy** · 27/02/2008, 09h51

ok je vais essayer merci de ton aide !!

**SpaceFrog** · 27/02/2008, 09h53

et marcha à egalement raison

Code :

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

liens[i].onclick = function() {

**fofyy** · 27/02/2008, 10h01

une petite question , je suis novice en javascript comme tu a du le remarqué !!
Comment tu le note apres dans le code javascript pour une id qui change ??
document.getElementById('galerie_mini')

merci beaucoup de m aider !!

**SpaceFrog** · 27/02/2008, 10h09

dans la boucle

Code :

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

document.getElementById('galerie_mini_'+i)

**fofyy** · 27/02/2008, 10h37

je vais d essayer ce que tu m a dis ca marche mais le probleme est que la grande photo change uniquement sur la derniere reference meme si je clique sur une petite image de la premiere reference je pense que ca vient de ma boucle mais je ne trouve pas ou !!
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
28
 
function displayPics()
{
for (var j = 1 ; j < 50 ; ++j) {
	var photos = document.getElementById('galerie_mini_'+j) ;
	// 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_'+j) ;
	// 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_'+j).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;
		};
	}
}	
 
}
window.onload = displayPics;

merci beaucoup de ton aide !!

**SpaceFrog** · 27/02/2008, 10h58

Code :

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

titre_photo.innerHTML = this.title;

?

à part ça je ne vois pas trop ?
tu as bien mofidié les id dans le html ?

**fofyy** · 27/02/2008, 11h10

pour le titre je l ai supprimé parce k il me sert pas !!
et oui j ai fais les modif du code htlm !

le voila :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<div id="droite">
							<h3>Nos réalisations</h3><br />
							</div>
						</div>		
 
<div class="unereference">
 
		<div class="gauche">
			<h4>Mairie de Nyons</h4>
 
			<dl id="photo_1">
			<dd><img id="big_pict_1" src="/images/batindus2.jpg" alt="" /></dd>
			</dl>
		</div><!--fermeture div gauche-->	
 
		<div class="droite">
		<div class="droite_ref">
			<ul id="galerie_mini_1">
 
			<a href="/images/batindus2.jpg"><img class="detail" src="/images/carre_place.jpg" alt="" /></a>
				<a href="/images/maisonpierre.jpg"><img class="detail" src="/images/carre_mas.jpg" alt="" /></a>
 
				<a href="/images/img-presentation.jpg"><img src="/images/carre_contrustion.jpg" alt="" /></a>
			</ul>
 
			<ul class="description">
				<li><strong>Client :</strong>Ville de Nyons</li>
				<li><strong>Lieu du chantier : </strong>Nyons</li>
 
				<li><strong>Année de réalisation : </strong>2004</li>
 
				<li><strong>Montant des travaux TTC : </strong>309875</li>
				<li><strong>Description : </strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vitae justo molestie dui egestas aliquet. Vestibulum fermentum luctus nulla.</li>
			</ul><!--fermeture ul description-->
			</div> <!---fermeture div droite_ref--->
		</div><!--fermeture div droite-->	
 
<p>******************************************************************************************************************************************</p>
 
</div> <!----fermeture div unereference----->
 
<div class="unereference">
 
		<div class="gauche">
			<h4>Piscine municipale</h4>
			<dl id="photo_2">
			<dd><img id="big_pict_2" src="/images/batindus.jpg" alt="" /></dd>
			</dl>
		</div><!--fermeture div gauche-->	
 
		<div class="droite">
 
		<div class="droite_ref">
			<ul id="galerie_mini_2">
 
			<a href="/images/batindus2.jpg"><img class="detail" src="/images/carre_place.jpg" alt="" /></a>
				<a href="/images/maisonpierre.jpg"><img class="detail" src="/images/carre_mas.jpg" alt="" /></a>
				<a href="/images/img-presentation.jpg"><img src="/images/carre_contrustion.jpg" alt="" /></a>
			</ul>
 
			<ul class="description">
				<li><strong>Client :</strong>Ville de montelimar</li>
 
				<li><strong>Lieu du chantier : </strong>montelimar</li>
 
				<li><strong>Année de réalisation : </strong>2006</li>
				<li><strong>Montant des travaux TTC : </strong>400000</li>
				<li><strong>Description : </strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vitae justo molestie dui egestas aliquet. Vestibulum fermentum luctus nulla.</li>
			</ul><!--fermeture ul description-->
 
			</div> <!---fermeture div droite_ref--->
		</div><!--fermeture div droite-->	
 
<p>******************************************************************************************************************************************</p>
</div> <!----fermeture div unereference----->
 
<div class="unereference">
 
		<div class="gauche">
			<h4>batiment public</h4>
 
			<dl id="photo_3">
			<dd><img id="big_pict_3" src="/images/batpublic4.jpg" alt="" /></dd>
			</dl>
		</div><!--fermeture div gauche-->	
 
		<div class="droite">
		<div class="droite_ref">
			<ul id="galerie_mini_3">
 
			<a href="/images/batindus2.jpg"><img class="detail" src="/images/carre_place.jpg" alt="" /></a>
				<a href="/images/maisonpierre.jpg"><img class="detail" src="/images/carre_mas.jpg" alt="" /></a>
 
				<a href="/images/img-presentation.jpg"><img src="/images/carre_contrustion.jpg" alt="" /></a>
			</ul>
 
			<ul class="description">
				<li><strong>Client :</strong>etat</li>
				<li><strong>Lieu du chantier : </strong>valence</li>
 
				<li><strong>Année de réalisation : </strong>2007</li>
 
				<li><strong>Montant des travaux TTC : </strong>23456.5</li>
				<li><strong>Description : </strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vitae justo molestie dui egestas aliquet. Vestibulum fermentum luctus nulla.</li>
			</ul><!--fermeture ul description-->
			</div> <!---fermeture div droite_ref--->
		</div><!--fermeture div droite-->	
 
<p>******************************************************************************************************************************************</p>
 
</div> <!----fermeture div unereference----->

**fofyy** · 28/02/2008, 10h12

C est bon j ai trouve la solution : http://www.developpez.net/forums/ima...es/yaisse2.gif

en fait j ai tou recommencé et j ai utilisé la classe Jquery !!

voici mon code javacript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(
    function() {
		$('ul.galerie_mini a').click(
			function() {
				var id = $(this).parents("ul.galerie_mini").attr('id');
				$('img#big_pict_'+id).attr('src',$(this).attr('href'));
				return false;
			}
		);
	}
);

il fau egalement copier la classe jquery !

code html :

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
48
 
//classe jquery 
<script type="text/javascript" src="/js/jquery.js"></script>
........
....
$i=1;
 if (is_array($reference))
 {
foreach($reference as $r)
{
?>
 
<div class="unereference">
 
		<div class="gauche">
			<h4><?echo $r->titre_ref;?></h4>
			<dl class="photo">
			<dd><img id="big_pict_<?php echo $i; ?>" src="/<?echo $r->photo1_ref;?>" alt="" /></dd>
			</dl>
		</div><!--fermeture div gauche-->	
 
		<div class="droite">
		<div class="droite_ref">
 
			<ul id="<?php echo $i; ?>" class="galerie_mini">
 
			<li><a href="/<?echo $r->photo2_maxi;?>"><img class="detail" src="/<?echo $r->photo2_mini;?>" alt="" /></a></li>
				<li><a href="/<?echo $r->photo3_maxi;?>"><img class="detail" src="/<?echo $r->photo3_mini;?>" alt="" /></a></li>
				<li><a href="/<?echo $r->photo4_maxi;?>"><img src="/<?echo $r->photo4_mini;?>" alt="" /></a></li>
			</ul>
 
			<ul class="description">
				<li><strong>Client :</strong><?echo $r->client_ref;?></li>
				<li><strong>Lieu du chantier : </strong><?echo $r->lieu_ref;?></li>
				<li><strong>Année de réalisation : </strong><?echo $r->annee_ref;?></li>
				<li><strong>Montant des travaux TTC : </strong><?echo $r->montant_ref;?></li>
				<li><strong>Description : </strong><?echo $r->description_ref;?></li>
			</ul><!--fermeture ul description-->
			</div> <!---fermeture div droite_ref--->
		</div><!--fermeture div droite-->	
 
<p>******************************************************************************************************************************************</p>
</div> <!--fermeture div unereference-->
<?php
$i=$i+1;
}
}
.......

merci pour votre quand meme

boucle foreach

JavaScript

Discussions similaires

Partager

Partager