Affichage photos dans une visionneuse

**jmde** · 10/04/2008, 17h07

Bonjour,

J’ai adapté ce code pour réaliser une visionneuse mais je n’arrive pas à faire défiler les photos

Est-ce que vous pouvez m’aider en corrigeant mon code, je précise que mes connaissances en javascrpit sont très limitées.

Merci de votre aide.

Salutations

Contenue du répertoire Photos :

/2008/Sejour/Province/Photos/001.jpg, 002.jpg, 003.jpg
/2008/Sejour/Province/Photos-dia/001.jpg, 002.jpg, 003.jpg
/2008/Sejour/Province/Vignettes/001.jpg, 002.jpg, 003.jpg

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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
//Visionneuse.js
 
var nb_photos,numero_photo,photo_hauteur_max,photo_largeur_max;
 
photo_hauteur_max="360";
photo_largeur_max="540";
 
// numero de la photo courante
numero_photo=1;
 
// nombre de photos dans la galerie
nb_photos=1;
 
var liste_photos=new Array();
var auteurs=new Array();
var legendes=new Array();
var src_grandes_photos=new Array();
 
var nom_galerie='';
 
var diaporama_actif=0;
var duree=3000;
 
function js_charger_galerie(annee,sujet,galerie,n) 
{
	var i = 0;
	var j = 1;
	var nom_fichier="000";
	var chemin = "/photos/" + annee + "/" + sujet + "/" + galerie + "/photos-dia/";
	var chemin2 = "/photos/" + annee + "/" + sujet + "/" + galerie + "/photos/";
	nb_photos = n;
 
	while (i<nb_photos)
	{
		liste_photos[i] = new Image();
		liste_photos[i].src = chemin + nom_fichier.substr(0,nom_fichier.length-j.toString(10).length) + j + ".jpg";
		liste_photos[i].alt = "xxxxxxxxx : "+ nom_galerie + " - Photo : " + j + "/" + nb_photos;
		liste_photos[i].title = "xxxxxxxxx : "+ nom_galerie + " - Photo : " + j + "/" + nb_photos;
		src_grandes_photos[i] = chemin2 + nom_fichier.substr(0,nom_fichier.length-j.toString(10).length) + j + ".jpg";
 
		i++;
		j++;
	}
}
 
function js_premiere_photo()
{
	numero_photo=1;
	js_affiche_photo(numero_photo);
}
 
function js_en_avant()
{
	(numero_photo == nb_photos) ? numero_photo=1 : numero_photo=numero_photo+1;
	js_affiche_photo(numero_photo);
}
 
function js_en_arriere()
{
	(numero_photo==1) ? numero_photo=nb_photos : numero_photo=(numero_photo-1);
	js_affiche_photo(numero_photo);
}
 
function js_derniere_photo()
{
	numero_photo=nb_photos;
	js_affiche_photo(numero_photo);
}
 
function js_diaporama()
{
	if (diaporama_actif == 0) 
	{
		document.images['ico_diaporama'].src='/obj/images/ico_ph_fin.gif';
		document.images['ico_diaporama'].alt='Fin Diaporama';
		document.images['ico_diaporama'].title='Arrêter le Diaporama';
		diaporama_actif=1; 
		js_changer_photo();
	}
	else 
	{
		document.images['ico_diaporama'].src='/obj/images/ico_ph_deb.gif';
		document.images['ico_diaporama'].alt='Début Diaporama';
		document.images['ico_diaporama'].title='Lancer le Diaporama';
		diaporama_actif=0; 
		js_arret_diaporama();
	}
}
 
function js_changer_photo() 
{
	(numero_photo == nb_photos) ? numero_photo=1 : numero_photo=numero_photo+1;
	js_affiche_photo(numero_photo);
	roll=setTimeout("js_changer_photo()",duree);
}
 
function js_arret_diaporama() 
{
	window.clearTimeout(roll);
	document.getElementById('photo_agrandie').src=liste_photos[numero_photo-1].src;
}
 
function js_affiche_photo(k) 
{
	numero_photo=k;
	image=document.getElementById('photo_agrandie');
	image.alt=liste_photos[k-1].alt;
	image.title=liste_photos[k-1].title;
	image.src=liste_photos[k-1].src;
 
 
	document.getElementById('photo').getElementsByTagName("tr")[0].getElementsByTagName("th")[0].getElementsByTagName("h2")[0].firstChild.nodeValue=liste_photos[k-1].title;
	document.getElementById('photo').getElementsByTagName("tr")[2].getElementsByTagName("td")[0].firstChild.nodeValue=auteurs[k-1];
	document.getElementById('photo').getElementsByTagName("tr")[3].getElementsByTagName("td")[0].firstChild.nodeValue=legendes[k-1];
	lien=document.getElementById('a_photo');
	lien.href=src_grandes_photos[k-1];
	lien=document.getElementById('photo_agrandie');
	lien.src=liste_photos[k-1].src;
 
}
 
/* Pour tester la configuration de l'internaute */
function js_javascript_actif() 
{
	document.write("<p>Actuellement, sur votre navigateur, Javascript est activé.</p>");
}
 
 
 
function js_proposer(bouton) 
{
	switch (bouton) 
	{
 
		case "Diaporama":
			document.write("<div id='boutons_galerie'>");
			document.write('<a href="#photo" title="Première" onclick="javascript:js_premiere_photo();"><img src="/obj/images/ico_ph_premier.gif" alt="Première" title="Première photo de la galerie"/></a>');
			document.write('<a href="#photo" title="Précédent" onclick="javascript:js_en_arriere();"><img src="/obj/images/ico_ph_precedent.gif" alt="Précédente" title="Photo précédente"/></a>');
			document.write('<a href="#photo" title="Diaporama" onclick="javascript:js_diaporama();"><img id="ico_diaporama" src="/obj/images/ico_ph_deb.gif" alt="Début Diaporama" title="Lancer le diaporama"/></a>');
			document.write('<a href="#photo" title="Suivant" onclick="javascript:js_en_avant();"><img src="/obj/images/ico_ph_suivant.gif" alt="Suivante" title="Photo suivante"/></a>');
			document.write('<a href="#photo" title="Dernière" onclick="javascript:js_derniere_photo();"><img src="/obj/images/ico_ph_dernier.gif" alt="Dernière" title="Dernière photo de la galerie"/></a>');
			document.write('</div>');
			break;
		default: 
			alert("Erreur fonction Proposer(bouton) : paramètre non prévu."); 
			break;
	}
}

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>Visionneuse</title>
<meta name="Keywords" content="p"/>
<script language="javascript" src="../JavaScript/Visionneuse.js"></script>
<link rel="stylesheet" type="text/css" href="../Css/Visionneuse.css" />
<script type="text/javascript">
<!--
	legendes[0] = "aa";
	legendes[1] = "ab";
	legendes[2] = "ac";
 
	auteurs[0] = "dd";
	auteurs[1] = "dc";
    auteurs[2] = "db";
 
</script>
 
<script type="text/javascript">
 
	nom_galerie = "Province";
-->
</script>
</head>
 
<body onload="javascript:js_charger_galerie('2008','Sejour','Province','20')">
<div id="conteneur">
	<div id="titre"><h1> wwwwwwwww </h1></div>
	<div id="milieu"> 
		<table id="photo" summary="">
			<tr><th><h2> xxxxxxxxxx xxxxxxxxx xxxxxxx - Photo : 1/20</h2></th></tr>
	          <tr><td><a id="a_photo" href="/Photos/2008/Sejour/Province/Photos/001.jpg"><img src="/Photos/2008/Sejour/Province/Photos-dia/001.jpg" alt=" - Photo : 1/20" width="604" height="454" id="photo_agrandie" title=" - Photo : 1/20"/></a></td>
			</tr>
			 <tr><td class="auteur_photo">aa</td>
			 </tr>
			<tr><td class="legende_photo">dd</td>
			</tr>
		</table>
	</div>
	<div id="mini_galerie" class="sous_bloc_float">
 
		<script type="text/javascript">
			<!--
			js_proposer("Diaporama");
			-->
		</script>
		<noscript> <div id="boutons_galerie">
		  <p>Activez le Javascript pour visualiser la galerie <br/>
		    <a href="/2-photos.html#aide-photos" title="aide pour les photos" >aaaaaaaaaa</a></p></div></noscript>
	</div>
 
	<div id="galerie">
<!-- Photos 1	-->
<a href="/Photos/2008/Sejour/Province/Photos/001.jpg" onclick="js_affiche_photo(2);return false;"><img src="/Photos/2008/Sejour/Province/vignettes/001.jpg" alt=" Vignette : 2/20" width="102" height="77" title="Vignette : 1/20"/></a>
 
<!-- Photos 2	-->
<a href="/Photos/2008/Sejour/Province/Photos/002.jpg" onclick="js_affiche_photo(2);return false;"><img src="/Photos/2008/Sejour/Province/vignettes/002.jpg" alt="Vignette : 2/20" width="100" height="75" title="Vignette : 2/20"/></a>
 
<!-- Photos 3	-->
<a href="/Photos/2008/Sejour/Province/Photos/003.jpg" onclick="js_affiche_photo(3);return false;"><img src="/Photos/2008/Sejour/Province/vignettes/003.jpg" alt="Vignette : 3/20" width="100" height="75" title="Vignette : 3/20"/></a>
</div>	
</div>	
</body>
</html>

Code css

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
/* Visionneuse.css */
 
* 
{
	margin:0;
	padding:0;
	font-family:Verdana,Arial,Helvetica,sans-serif; 
}
 
body  
{  
	font-size:75%;
	text-align:center;  
	background-color:#EEE;
	color:#000;
	margin:15px 0 15px 0;	
}
 
h1 	
{
	font-size:1.4em; 
	font-weight:bold; 
	text-align:center;
}
h2 	
{  
	font-size:1.0em; 
	font-weight:bold; 
	text-align:left; 
	margin:10px 0 5px 0; 
}
 
img 
{
	border:none;
	vertical-align:middle;
}
 
table 
{
	border:2px solid #6495ed;
	width:70%;
	text-align:center;
	border-collapse:collapse;
	margin:auto;
}
 
#conteneur 
{
	width:770px;
	height:auto;
	margin:0 auto 0 auto;
	border:2px #000 solid;
	background-color:#9ACBEF;
	color:#000; 
	text-align:left;
}
 
titre 
{
	width:766px;
	height:40px;
	line-height:40px;
	text-align:center;
	clear:both;
}
 
#milieu 
{
	width:604px;
	min-height:300px;
	background-color:#EEE;
	color:#000;
	text-align:justify;
	float:left;
	text-align:justify;
	border:2px solid #000;
	overflow:visible;
	margin-left: 80px;
}
 
#galerie 
{
	width:770px;
	height:120px;
	background-color:#000;
	color:#FFF;
	border-top:4px solid #000;
	padding:0;
	margin:0;
	text-align:left ;
	overflow:auto;
	float:left;
	white-space:nowrap;
}
 
#galerie a img
{
	height:100px;
}
 
#photo 
{
	border:2px solid #000; 
	width:100%;
	height:427px;
	text-align:center;
	border-collapse:collapse;
	margin:auto;
	background-color:#000;
	color:#FFF;
}
 
#photo_agrandie 
{
	background-color:#000;
	color:#FFF;
	text-align:center; 
	padding:0;
	margin:0; 
	border:0;
}
 
#mini_galerie 
{
   	text-align:center;
	width:770px;
	height:35px;
	margin:0; 
	padding:3px 0 8px 0; 
}
 
#boutons_galerie 
{
	margin:0 110px 0 110px;
}
 
#boutons_galerie a img
{
	margin:0 5px 0 5px; 
}
 
#boutons_galerie p 
{
	text-align:center;
	margin:0;
}

**jmde** · 12/04/2008, 14h15

Bonjour,

Je ne peux vraiment pas croire qu'il ni a personne pour me donner un coup de main dans ce forum d'entraide.

Je suis bloquer et mes connaissances ne me permette pas d'avancer, à ce jour lorsque je lance la lecture automatique les titres et les numéros des photos défilent, mais pas les photos.

Merci pour votre aide.

Salutations

**shaun_the_sheep** · 12/04/2008, 14h24

Salut,

Vérifie tes chemins

tu as :

var chemin = "/photos/" + annee + "/" + sujet + "/" + galerie + "/photos-dia/";
var chemin2 = "/photos/" + annee + "/" + sujet + "/" + galerie + "/photos/";

et

/2008/Sejour/Province/Photos/001.jpg, 002.jpg, 003.jpg
/2008/Sejour/Province/Photos-dia/001.jpg, 002.jpg, 003.jpg
/2008/Sejour/Province/Vignettes/001.jpg, 002.jpg, 003.jpg

cela ne devrait il pas être

var chemin = "/photos/" + annee + "/" + sujet + "/" + galerie + "/Photos-dia/";
var chemin2 = "/photos/" + annee + "/" + sujet + "/" + galerie + "/Photos/";

**jmde** · 12/04/2008, 17h49

Bonjour,

Merci pour ta réponse, la modification n’à rien fait, mais je pense que tu à mis le doigt sur le problème.

1° A l’ouverture de la page les vignettes s’affichent et la grande photo 001.jpg aussi

2° Avant d’activer le script les photos s’affichent correctement avec ce chemin :
C:\Documents and Settings\Propriétaire\Mes documents\AA\BB\Photos\2008\Sejour\Province\Photos\001.jpg

3° Lorsque j’active le script et que je clique sur la vignette ou lecture auto la photo ne s’affiche pas et le chemin est le suivant :
C:\Photos\2008\Sejour\Province\Photos\001.jpg

Salutations

**shaun_the_sheep** · 12/04/2008, 18h15

Salut,

essaye de travailler avec de chemins relatifs.

exemple:
mapageweb est sous ..... /mesprojets/monappli/mapage.html
mes photos : /mesprojets/monappli/mesphotos/maphoto.jpg

-> sous mapage web , le chemin de la photo est :
./mesphotos/maphoto.jgp

par exemple.

**KawaJVC** · 12/04/2008, 18h51

Personnellement , pour le developpement HTML/CSS/JavaScript , je pense qu'il vaut mieux travailler directement sur son hébergeur , après pour le php je pense que le local est approprié.

**jmde** · 15/04/2008, 11h40

Bonjour,

En effet lorsque j'ai fait directement des essais avec mon hebergeur la visionneuse à fonctionner.

Maintenant je voudrais incerer un code pour afficher un message pendant le chargement de la galerie et qui disparait à la fin du chargement.

Comment faire ?

Merci pour votre aide.

Salutations

**jmde** · 20/04/2008, 15h45

Bonjour,

Il y a vraiment personne qui veut ou peut m'aider ?

Salutations

**shaun_the_sheep** · 21/04/2008, 08h22

Salut,

on peut imaginer l'ouverture d'une simple fenetre pop-up au début de la fonction de chargement des photos que tu fermes à la fin de la fonction.

peut être que ?

**jmde** · 21/04/2008, 12h59

Bonjour beegood,

Oui mais comment le faire ?

Salutations

**shaun_the_sheep** · 21/04/2008, 13h28

Salut,

Regarde la méthode:
popup_window =window.open(page,"nom_popup","menubar=no, status=no, scrollbars=no, menubar=no, width=200, height=100");

et

popup_window.close ();

Affichage photos dans une visionneuse

JavaScript

Discussions similaires

Partager

Partager