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>

boucle foreach

JavaScript

Vue hybride

Discussions similaires

Partager

Partager