| 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; ?>";
|
| 922 |
aurelien |
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 |
|
| 916 |
aurelien |
115 |
$(document).ready(function() {
|
|
|
116 |
$('#precedent').click(function() {
|
| 922 |
aurelien |
117 |
imagePrecedente();
|
| 916 |
aurelien |
118 |
});
|
|
|
119 |
|
|
|
120 |
$('#suivant').click(function() {
|
| 922 |
aurelien |
121 |
imageSuivante();
|
| 916 |
aurelien |
122 |
});
|
|
|
123 |
|
|
|
124 |
if(urlImage != "null" && urlImage != "") {
|
|
|
125 |
indexImage = Array.indexOf(urls, urlImage);
|
|
|
126 |
$('#illustration').attr('src', urls[indexImage]);
|
|
|
127 |
}
|
| 922 |
aurelien |
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 |
});
|
|
|
154 |
|
|
|
155 |
$('#zone-pied').hide();
|
| 916 |
aurelien |
156 |
});
|
|
|
157 |
// -->
|
|
|
158 |
</script>
|
| 922 |
aurelien |
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>
|
|
|
177 |
</script>
|
|
|
178 |
|
|
|
179 |
<div id="info-img-galerie">
|
| 916 |
aurelien |
180 |
<div class="conteneur-precedent">
|
| 922 |
aurelien |
181 |
<a id="precedent" href="#" title="cliquez ici ou utilisez la flèche gauche pour afficher l'image précédente">
|
| 916 |
aurelien |
182 |
<img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheGauche.jpg" alt="<" />
|
|
|
183 |
</a>
|
|
|
184 |
</div>
|
|
|
185 |
<div class="img-cadre">
|
| 922 |
aurelien |
186 |
<img id="illustration" src="<?=$urls[0]?>" alt="" title="cliquez pour voir cette image dans son format original" /><br />
|
|
|
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>
|
| 916 |
aurelien |
188 |
</div>
|
|
|
189 |
<div class="conteneur-suivant">
|
| 922 |
aurelien |
190 |
<a id="suivant" href="#" title="cliquez ici ou utilisez la flèche droite pour afficher l'image suivante">
|
| 916 |
aurelien |
191 |
<img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheDroite.jpg" alt=">" />
|
|
|
192 |
</a>
|
|
|
193 |
</div>
|
|
|
194 |
<hr class="nettoyage" />
|
|
|
195 |
</div>
|