Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Go to most recent revision | Details | Last modification | View Log | RSS feed

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