Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Rev 1428 | Go to most recent revision | 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();
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');
1007 aurelien 137 
		//if($(window).height() > 800) {
138 
		    window.resizeTo($(window).width(),hauteurSansMeta+300);
139 
		//}
922 aurelien 140 
		$("#lien-voir-meta").html('Cacher les informations');
141 
	}
142 
 
143 
   function cacherMetadonnees() {
1007 aurelien 144 
	   //if($(window).height() > 800) {
970 aurelien 145 
		    window.resizeTo($(window).width(),hauteurSansMeta);
1007 aurelien 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>
1512 delphine 222 
			<dt>Licence</dt><dd><a class="lien-externe" href="http://www.tela-botanica.org/page:licence">CC-BY-SA 2.0 FR</a></dd>
922 aurelien 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>