Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Rev 916 | Rev 966 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 916 Rev 922
Line 1... Line 1...
1
<script type="text/javascript">
1
<script type="text/javascript">
2
<!--
2
<!--
3
   var urls = [<?= '"'.implode($urls, '","').'"'; ?>]; 
3
   var urls = [<?= '"'.implode($urls, '","').'"'; ?>]; 
-
 
4
   var ids = [<?= '"'.implode($ids, '","').'"'; ?>]; 
-
 
5
   var meta = new Array();
4
   var indexImage = 0;
6
   var indexImage = 0;
5
   var urlImage = "<?= $url_image; ?>";
7
   var urlImage = "<?= $url_image; ?>";
-
 
8
   var tailleMax = 580;
-
 
9
   var titre = "<?= $titre; ?>";
-
 
10
   var urlMeta = "<?= $url_meta; ?>";
-
 
11
   var urlContact = "<?= $url_contact; ?>";
-
 
12
   var metadonneesOuvertes = false;
-
 
13
   var hauteurSansMeta = null;
-
 
14
   
-
 
15
   function redimensionnerImage(objet) {
-
 
16
	   
-
 
17
	   objet.removeAttr("width"); 
-
 
18
	   objet.removeAttr("height");
-
 
19
	   
-
 
20
	   var hauteurImage = objet.height();
-
 
21
	   var largeurImage = objet.width();
-
 
22
	   var rapport = 1;
-
 
23
	   if(hauteurImage > largeurImage && hauteurImage > tailleMax) {
-
 
24
		   rapport = largeurImage/hauteurImage;
-
 
25
		   hauteurImage = 580;
-
 
26
		   
-
 
27
		   largeurImage = hauteurImage*rapport;
-
 
28
		   $('#illustration').attr("height", hauteurImage);
-
 
29
		   $('#illustration').attr("width", largeurImage);
-
 
30
	   }
-
 
31
	   hauteurSansMeta = hauteurImage+90;
-
 
32
	   window.resizeTo(largeurImage+150,hauteurImage+90);
-
 
33
   }
-
 
34
   
-
 
35
   function imageSuivante() {
-
 
36
	   indexImage++;
-
 
37
	   if(indexImage >= urls.length) {
-
 
38
		   indexImage = 0;
-
 
39
	   }
-
 
40
	   cacherMetadonnees();
-
 
41
	   $('#illustration').attr('src', urls[indexImage]);
-
 
42
   }
-
 
43
   
-
 
44
   function imagePrecedente() {
-
 
45
	   indexImage--;
-
 
46
	   if(indexImage <= 0) {
-
 
47
		   indexImage = urls.length - 1;
-
 
48
	   }
-
 
49
	   cacherMetadonnees();
-
 
50
	   $('#illustration').attr('src', urls[indexImage]);
-
 
51
   }
-
 
52
   
-
 
53
   function ouvrirFenetreIllustrationResultat(url, titre) {
-
 
54
		var fenetre = window.open('', titre+" - zoom ");
-
 
55
		var tmp = fenetre.document;
-
 
56
		tmp.write('<html><head><title>'+titre+" - zoom "+'</title>');
-
 
57
		tmp.write('</head><body>');
-
 
58
		tmp.write('<p style="height="100%";text-align:center;line-height="100%"><img id="image_agrandie" style="vertical-align:middle;" src="'+url+'" /></p>');
-
 
59
		tmp.write('</body></html>');
-
 
60
		tmp.clos();
-
 
61
	}
-
 
62
   
-
 
63
   function obtenirUrlContact(idImage, IdAuteur) {
-
 
64
	   return urlContact.replace('{id_auteur}',IdAuteur).replace('{id_img}',idImage);
-
 
65
   }
-
 
66
   
-
 
67
   function formaterDate(string) {  
-
 
68
	    var date = new Date();  
-
 
69
	    var parts = String(string).split(/[- :]/);  
-
 
70
	  
-
 
71
	    date.setFullYear(parts[0]);  
-
 
72
	    date.setMonth(parts[1] - 1);  
-
 
73
	    date.setDate(parts[2]);  
-
 
74
	    date.setHours(parts[3]);  
-
 
75
	    date.setMinutes(parts[4]);  
-
 
76
	    date.setSeconds(parts[5]);  
-
 
77
	    date.setMilliseconds(0);  
-
 
78
	    return (("0" + date.getDate()).slice(-2))+"/"+(("0"+(date.getMonth()+1)).slice(-2))+"/"+date.getFullYear();
-
 
79
   }
-
 
80
   
-
 
81
	function formaterMetadonnees(data) {
-
 
82
	   	data.contact_url = obtenirUrlContact(ids[indexImage], data['auteur.id']);
-
 
83
		data.id = ids[indexImage];
-
 
84
		data.date = formaterDate(data.date);
-
 
85
		return data;
-
 
86
	}
-
 
87
   
-
 
88
   	function chargerEtAfficherMetadonnees() {
-
 
89
	   $('#info-obs-meta').remove();
-
 
90
	   if(meta[ids[indexImage]] == null) {   
-
 
91
			var urlMetaImage = urlMeta.replace('{projet}','cel').replace('{id}',ids[indexImage]);
-
 
92
			$.get(urlMetaImage, function(data) {
-
 
93
				data = formaterMetadonnees(data);
-
 
94
				afficherMetadonnees(data);
-
 
95
				meta[ids[indexImage]] = data;
-
 
96
			});
-
 
97
	   } else {
-
 
98
		   afficherMetadonnees(meta[ids[indexImage]]);
-
 
99
	   }  	
-
 
100
   	}
-
 
101
   
-
 
102
	function afficherMetadonnees(data) {
-
 
103
		$("#tpl-obs-meta").tmpl(data).appendTo('.img-cadre');
-
 
104
		window.resizeTo($(window).width(),hauteurSansMeta+215);
-
 
105
		$("#lien-voir-meta").html('Cacher les informations');
-
 
106
	}
-
 
107
   
-
 
108
   function cacherMetadonnees() {
-
 
109
	   window.resizeTo($(window).width(), hauteurSansMeta); 
-
 
110
	   $('#info-obs-meta').remove();
-
 
111
	   $("#lien-voir-meta").html('Informations sur cette image / Contacter l\'auteur');
-
 
112
	   metadonneesOuvertes = false;
-
 
113
   }
-
 
114
   
6
   $(document).ready(function() {
115
   $(document).ready(function() {
7
	   $('#precedent').click(function() {
116
	   $('#precedent').click(function() {
8
		   indexImage--;
117
		   imagePrecedente();
9
		   if(indexImage <= 0) {
-
 
10
			   indexImage = urls.length - 1;
-
 
11
		   }
-
 
12
		   console.log(indexImage);
-
 
13
		   $('#illustration').attr('src', urls[indexImage]);
-
 
14
	   });
118
	   });
Line 15... Line 119...
15
	   
119
	   
16
	   $('#suivant').click(function() {
120
	   $('#suivant').click(function() {
17
		   indexImage++;
-
 
18
		   if(indexImage >= urls.length) {
-
 
19
			   indexImage = 0;
-
 
20
		   }
-
 
21
		   console.log(indexImage);
-
 
22
		   $('#illustration').attr('src', urls[indexImage]);
121
		   imageSuivante();
Line 23... Line 122...
23
	   });
122
	   });
24
	   
123
	   
25
	   if(urlImage != "null" && urlImage != "") {
124
	   if(urlImage != "null" && urlImage != "") {
26
		   indexImage = Array.indexOf(urls, urlImage);
125
		   indexImage = Array.indexOf(urls, urlImage);
-
 
126
		   $('#illustration').attr('src', urls[indexImage]);
-
 
127
	   }
-
 
128
	   
-
 
129
	   $('#illustration').load(function() {
-
 
130
			redimensionnerImage($(this));
-
 
131
	   });
-
 
132
	   
-
 
133
	   $('#illustration').click(function() {
-
 
134
			ouvrirFenetreIllustrationResultat($(this).attr("src").replace("L","X3L"), titre);
-
 
135
	   });
-
 
136
	   
-
 
137
	   $("#lien-voir-meta").click(function() {
-
 
138
		   metadonneesOuvertes = !metadonneesOuvertes;
-
 
139
		   if(metadonneesOuvertes) {
-
 
140
		   		chargerEtAfficherMetadonnees();  
-
 
141
		   } else {
-
 
142
			   	cacherMetadonnees();
-
 
143
		   }
-
 
144
	   });
-
 
145
	   
-
 
146
	   $("body").keydown(function(e) {
-
 
147
		   	if(e.keyCode == 37) { // gauche
-
 
148
		   		imagePrecedente();
-
 
149
		   	}
-
 
150
		   	else if(e.keyCode == 39) { // droite
-
 
151
		   		imageSuivante();
-
 
152
		   	}
-
 
153
		});
27
		   $('#illustration').attr('src', urls[indexImage]);
154
	     
28
	   }
155
	   $('#zone-pied').hide();
29
   });
156
   });
-
 
157
 // -->
-
 
158
</script>
-
 
159
 
-
 
160
<!-- Squelette du contenu du tableau des observation -->
-
 
161
<script id="tpl-obs-meta" type="text/x-jquery-tmpl">
-
 
162
	<div id="info-obs-meta" class="importance1">
-
 
163
		<dl>
-
 
164
			<dt>Photo n°</dt><dd>${id}</dd>
-
 
165
			<dt>Titre</dt><dd>${$data["determination.nom_sci"]}</dd>
-
 
166
			<dt>Description</dt><dd>${$data['determination.libelle']}</dd>
-
 
167
			<dt>Localisation</dt><dd>${$data['station.commune']}</dd>
-
 
168
			<dt>Auteur</dt>
-
 
169
			<dd>
-
 
170
				${$data['auteur.libelle']}
-
 
171
				<a class="mailto" href="${contact_url}">(Contacter ...)</a>
-
 
172
			</dd>
-
 
173
			<dt>Date d'observation</dt><dd>${date}</dd>
-
 
174
			<dt>Licence</dt><dd><a class="lien-externe" href="http://www.tela-botanica.org/page:licence">CC-BY-SA</a></dd>
-
 
175
		</dl>
-
 
176
	</div>
30
 // -->
177
</script>
31
</script>
178
 
32
<div id="info-img">
179
<div id="info-img-galerie">
33
	<div class="conteneur-precedent">
180
	<div class="conteneur-precedent">
34
		<a id="precedent" href="#"> 
181
		<a id="precedent" href="#" title="cliquez ici ou utilisez la flèche gauche pour afficher l'image précédente"> 
35
			<img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheGauche.jpg" alt="&lt;" />
182
			<img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheGauche.jpg" alt="&lt;" />
36
		</a>
183
		</a>
37
	</div>
184
	</div>
-
 
185
	<div class="img-cadre">
38
	<div class="img-cadre">
186
			<img id="illustration" src="<?=$urls[0]?>" alt="" title="cliquez pour voir cette image dans son format original" /><br />
39
			<img id="illustration" src="<?=$urls[0]?>" alt="" />
187
			<a id="lien-voir-meta" href="#" title="cliquez ici pour voir les métadonnées de l'image et contacter l'auteur">Informations sur cette image / Contacter l'auteur</a>
40
	</div>
188
	</div>
41
	<div class="conteneur-suivant">
189
	<div class="conteneur-suivant">
42
		<a id="suivant" href="#">
190
		<a id="suivant" href="#" title="cliquez ici ou utilisez la flèche droite pour afficher l'image suivante">
43
			<img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheDroite.jpg" alt="&gt;" />
191
			<img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheDroite.jpg" alt="&gt;" />
44
		</a>
192
		</a>
45
	</div>
193
	</div>
46
	<hr class="nettoyage" />
194
	<hr class="nettoyage" />