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;
|
|
|
44 |
}
|
922 |
aurelien |
45 |
|
|
|
46 |
largeurImage = hauteurImage*rapport;
|
|
|
47 |
$('#illustration').attr("height", hauteurImage);
|
|
|
48 |
$('#illustration').attr("width", largeurImage);
|
|
|
49 |
}
|
970 |
aurelien |
50 |
|
|
|
51 |
var facteurResize = 90;
|
|
|
52 |
if($(window).height() < 800) {
|
|
|
53 |
facteurResize = 10;
|
|
|
54 |
}
|
|
|
55 |
hauteurSansMeta = hauteurImage+facteurResize;
|
|
|
56 |
window.resizeTo(largeurImage+260,hauteurImage+facteurResize+90);
|
922 |
aurelien |
57 |
}
|
970 |
aurelien |
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');
|
|
|
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');
|
970 |
aurelien |
137 |
if($(window).height() > 800) {
|
|
|
138 |
window.resizeTo($(window).width(),hauteurSansMeta+215);
|
|
|
139 |
}
|
922 |
aurelien |
140 |
$("#lien-voir-meta").html('Cacher les informations');
|
|
|
141 |
}
|
|
|
142 |
|
|
|
143 |
function cacherMetadonnees() {
|
970 |
aurelien |
144 |
if($(window).height() > 800) {
|
|
|
145 |
window.resizeTo($(window).width(),hauteurSansMeta);
|
|
|
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>
|
|
|
222 |
<dt>Licence</dt><dd><a class="lien-externe" href="http://www.tela-botanica.org/page:licence">CC-BY-SA</a></dd>
|
|
|
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="<" />
|
|
|
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=">" />
|
|
|
240 |
</a>
|
|
|
241 |
</div>
|
|
|
242 |
<hr class="nettoyage" />
|
|
|
243 |
</div>
|