boucle foreach

Version imprimable

boucle foreach

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:

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
}

26/02/2008, 13h25
SpaceFrog

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

et puis il eut été intéressant d'avoir le javascript sans le php ...
26/02/2008, 13h55
marcha

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
27/02/2008, 08h50
fofyy

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

dsl le tableau ne fonctionne pas !! :cry:

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 !!
27/02/2008, 09h11
SpaceFrog

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é ...

a ok !!

ben voila le code alors :

Code:

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>

27/02/2008, 09h35
SpaceFrog

un id doit être unique sur la page !!!!
tu dois avoir un id différent pour chaque pbjet !
27/02/2008, 09h43
fofyy

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 !!
27/02/2008, 09h48
SpaceFrog
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:

1 2 id="galerie_mini_1" id="galerie_mini_2" ...
27/02/2008, 09h51
fofyy

ok je vais essayer merci de ton aide !!
27/02/2008, 09h53
SpaceFrog

et marcha à egalement raison

Code:

liens[i].onclick = function() {
27/02/2008, 10h01
fofyy

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 !!
27/02/2008, 10h09
SpaceFrog

dans la boucle

Code:

document.getElementById('galerie_mini_'+i)

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:

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 !!

27/02/2008, 10h58
SpaceFrog

Code:

titre_photo.innerHTML = this.title;

?

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

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:

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----->

Resolu

C est bon j ai trouve la solution : http://www.developpez.net/forums/ima...es/yaisse2.gif
:yaisse2:
en fait j ai tou recommencé et j ai utilisé la classe Jquery !!

voici mon code javacript :

Code:

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:

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
:D