Affichage photos dans une visionneuse
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:
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:
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:
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;
} |
