Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Rev 966 | Rev 1007 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

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