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" />