Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Rev 1578 | Details | Compare with Previous | 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;
1007 aurelien 44 
		   	$("#info-img-galerie").height('100%');
970 aurelien 45 
		   }
922 aurelien 46 
 
47 
		   largeurImage = hauteurImage*rapport;
48 
		   $('#illustration').attr("height", hauteurImage);
49 
		   $('#illustration').attr("width", largeurImage);
50 
	   }
970 aurelien 51 
 
52 
	   var facteurResize = 90;
53 
	   if($(window).height() < 800) {
54 
	       facteurResize = 10;
55 
	   }
56 
	   hauteurSansMeta = hauteurImage+facteurResize;
57 
	   window.resizeTo(largeurImage+260,hauteurImage+facteurResize+90);
922 aurelien 58 
   }
970 aurelien 59 
 
60 
   function configurerAffichagePetiteTaille() {
61 
	$("#info-img-galerie").height('100%');
62 
	$('html').css('height', '100%');
63 
	$('body').css('height', '100%');
64 
	$("#zone-corps").height('100%');
65 
	$("#zone-conteneur").height('100%');
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();
1506 mathias 123 
	   indexImage = Math.max(indexImage, 0); // parfois on a -1 => wtf
922 aurelien 124 
	   if(meta[ids[indexImage]] == null) {
947 aurelien 125 
			var urlMetaImage = urlMeta.replace('{projet}','cel').replace('{id}',ids[indexImage]).replace('{referentiel}',referentiel);
922 aurelien 126 
			$.get(urlMetaImage, function(data) {
127 
				data = formaterMetadonnees(data);
128 
				afficherMetadonnees(data);
129 
				meta[ids[indexImage]] = data;
130 
			});
131 
	   } else {
132 
		   afficherMetadonnees(meta[ids[indexImage]]);
133 
	   }
134 
   	}
135 
 
136 
	function afficherMetadonnees(data) {
137 
		$("#tpl-obs-meta").tmpl(data).appendTo('.img-cadre');
1007 aurelien 138 
		//if($(window).height() > 800) {
139 
		    window.resizeTo($(window).width(),hauteurSansMeta+300);
140 
		//}
922 aurelien 141 
		$("#lien-voir-meta").html('Cacher les informations');
142 
	}
143 
 
144 
   function cacherMetadonnees() {
1007 aurelien 145 
	   //if($(window).height() > 800) {
970 aurelien 146 
		    window.resizeTo($(window).width(),hauteurSansMeta);
1007 aurelien 147 
	   //}
922 aurelien 148 
	   $('#info-obs-meta').remove();
149 
	   $("#lien-voir-meta").html('Informations sur cette image / Contacter l\'auteur');
150 
	   metadonneesOuvertes = false;
151 
   }
970 aurelien 152 
 
916 aurelien 153 
   $(document).ready(function() {
154 
	   $('#precedent').click(function() {
922 aurelien 155 
		   imagePrecedente();
916 aurelien 156 
	   });
157 
 
158 
	   $('#suivant').click(function() {
922 aurelien 159 
		   imageSuivante();
916 aurelien 160 
	   });
966 aurelien 161 
 
970 aurelien 162 
	    if(!Array.indexOf){
163 
		Array.indexOf = function(array, search){
164 
		  for(var i=0; i<array.length; i++){
165 
		      if(array[i]==search){
166 
			return i;
167 
		      }
168 
		  }
169 
		  return -1;
966 aurelien 170 
		}
970 aurelien 171 
	    }
916 aurelien 172 
 
173 
	   if(urlImage != "null" && urlImage != "") {
174 
		   indexImage = Array.indexOf(urls, urlImage);
175 
		   $('#illustration').attr('src', urls[indexImage]);
176 
	   }
922 aurelien 177 
 
178 
	   $('#illustration').load(function() {
179 
			redimensionnerImage($(this));
180 
	   });
181 
 
182 
	   $('#illustration').click(function() {
183 
			ouvrirFenetreIllustrationResultat($(this).attr("src").replace("L","X3L"), titre);
184 
	   });
185 
 
186 
	   $("#lien-voir-meta").click(function() {
187 
		   metadonneesOuvertes = !metadonneesOuvertes;
188 
		   if(metadonneesOuvertes) {
189 
		   		chargerEtAfficherMetadonnees();
190 
		   } else {
191 
			   	cacherMetadonnees();
192 
		   }
193 
	   });
194 
 
195 
	   $("body").keydown(function(e) {
196 
		   	if(e.keyCode == 37) { // gauche
197 
		   		imagePrecedente();
198 
		   	}
199 
		   	else if(e.keyCode == 39) { // droite
200 
		   		imageSuivante();
201 
		   	}
202 
		});
203 
 
204 
	   $('#zone-pied').hide();
916 aurelien 205 
   });
206 
 // -->
207 
</script>
922 aurelien 208 
 
209 
<!-- Squelette du contenu du tableau des observation -->
210 
<script id="tpl-obs-meta" type="text/x-jquery-tmpl">
211 
	<div id="info-obs-meta" class="importance1">
212 
		<dl>
213 
			<dt>Photo n°</dt><dd>${id}</dd>
1578 delphine 214 
			<dt>Titre</dt><dd>${$data["determination.nom_sci"]}</dd>
215 
			<dt>Description</dt><dd>${$data['determination.libelle']}</dd>
1579 delphine 216 
			<dd><a target="_blank" title="Signaler une mauvaise identification sur IdentiPlante"
1578 delphine 217 
					   href="http://www.tela-botanica.org/appli:identiplante#obs~${$data["observation.id"]}">
1577 delphine 218 
						Signaler une mauvaise identification
1579 delphine 219 
					</a><br /></dd>
922 aurelien 220 
			<dt>Localisation</dt><dd>${$data['station.commune']}</dd>
221 
			<dt>Auteur</dt>
222 
			<dd>
223 
				${$data['auteur.libelle']}
224 
				<a class="mailto" href="${contact_url}">(Contacter ...)</a>
225 
			</dd>
226 
			<dt>Date d'observation</dt><dd>${date}</dd>
1513 delphine 227 
			<dt>Licence</dt><dd><a class="lien-externe" href="https://www.tela-botanica.org/page:licence">CC-BY-SA 2.0 FR</a></dd>
922 aurelien 228 
		</dl>
229 
	</div>
230 
</script>
231 
 
232 
<div id="info-img-galerie">
916 aurelien 233 
	<div class="conteneur-precedent">
922 aurelien 234 
		<a id="precedent" href="#" title="cliquez ici ou utilisez la flèche gauche pour afficher l'image précédente">
1506 mathias 235 
			<img style="border:none" src="https://www.tela-botanica.org/sites/commun/generique/images/flecheGauche.jpg" alt="&lt;" />
916 aurelien 236 
		</a>
237 
	</div>
238 
	<div class="img-cadre">
922 aurelien 239 
			<img id="illustration" src="<?=$urls[0]?>" alt="" title="cliquez pour voir cette image dans son format original" /><br />
240 
			<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 241 
	</div>
242 
	<div class="conteneur-suivant">
922 aurelien 243 
		<a id="suivant" href="#" title="cliquez ici ou utilisez la flèche droite pour afficher l'image suivante">
1506 mathias 244 
			<img style="border:none" src="https://www.tela-botanica.org/sites/commun/generique/images/flecheDroite.jpg" alt="&gt;" />
916 aurelien 245 
		</a>
246 
	</div>
247 
	<hr class="nettoyage" />
1506 mathias 248 
</div>