WebSVN – eFlore/Applications.eflore-consultation – Diff – /trunk/modules/popup_galerie/squelettes/popup_galerie_illustrations.tpl.html


<script type="text/javascript">
<!--
   var urls = [<?= '"'.implode($urls, '","').'"'; ?>]; 
   var ids = [<?= '"'.implode($ids, '","').'"'; ?>]; 
   var meta = new Array();
   var indexImage = 0;
   var urlImage = "<?= $url_image; ?>";
   var tailleMax = 580;
   var titre = "<?= $titre; ?>";
   var urlMeta = "<?= $url_meta; ?>";
   var urlContact = "<?= $url_contact; ?>";
   var referentiel = "<?= Registre::get('parametres.referentiel'); ?>";
   var metadonneesOuvertes = false;
   var hauteurSansMeta = null;
   
   function redimensionnerImage(objet) {
	   
	   objet.removeAttr("width"); 
	   objet.removeAttr("height");
	   
	   var hauteurImage = objet.height();
	   var largeurImage = objet.width();
	   var rapport = 1;
	   if(hauteurImage > largeurImage && hauteurImage > tailleMax) {
		   rapport = largeurImage/hauteurImage;
		   hauteurImage = 580;
		   
		   largeurImage = hauteurImage*rapport;
		   $('#illustration').attr("height", hauteurImage);
		   $('#illustration').attr("width", largeurImage);
	   }
	   hauteurSansMeta = hauteurImage+90;
	   window.resizeTo(largeurImage+150,hauteurImage+90);
   }
   
   function imageSuivante() {
	   indexImage++;
	   if(indexImage >= urls.length) {
		   indexImage = 0;
	   }
	   cacherMetadonnees();
	   $('#illustration').attr('src', urls[indexImage]);
   }
   
   function imagePrecedente() {
	   indexImage--;
	   if(indexImage <= 0) {
		   indexImage = urls.length - 1;
	   }
	   cacherMetadonnees();
	   $('#illustration').attr('src', urls[indexImage]);
   }
   
   function ouvrirFenetreIllustrationResultat(url, titre) {
		var fenetre = window.open('', titre+" - zoom ");
		var tmp = fenetre.document;
		tmp.write('<html><head><title>'+titre+" - zoom "+'</title>');
		tmp.write('</head><body>');
		tmp.write('<p style="height="100%";text-align:center;line-height="100%"><img id="image_agrandie" style="vertical-align:middle;" src="'+url+'" /></p>');
		tmp.write('</body></html>');
		tmp.clos();
	}
   
   function obtenirUrlContact(idImage, IdAuteur) {
	   return urlContact.replace('{id_auteur}',IdAuteur).replace('{id_img}',idImage);
   }
   
   function formaterDate(string) {  
	    var date = new Date();  
	    var parts = String(string).split(/[- :]/);  
	  
	    date.setFullYear(parts[0]);  
	    date.setMonth(parts[1] - 1);  
	    date.setDate(parts[2]);  
	    date.setHours(parts[3]);  
	    date.setMinutes(parts[4]);  
	    date.setSeconds(parts[5]);  
	    date.setMilliseconds(0);  
	    return (("0" + date.getDate()).slice(-2))+"/"+(("0"+(date.getMonth()+1)).slice(-2))+"/"+date.getFullYear();
   }
   
	function formaterMetadonnees(data) {
	   	data.contact_url = obtenirUrlContact(ids[indexImage], data['auteur.id']);
		data.id = ids[indexImage];
		data.date = formaterDate(data.date);
		return data;
	}
   
   	function chargerEtAfficherMetadonnees() {
	   $('#info-obs-meta').remove();
	   if(meta[ids[indexImage]] == null) {   
			var urlMetaImage = urlMeta.replace('{projet}','cel').replace('{id}',ids[indexImage]).replace('{referentiel}',referentiel);
			$.get(urlMetaImage, function(data) {
				data = formaterMetadonnees(data);
				afficherMetadonnees(data);
				meta[ids[indexImage]] = data;
			});
	   } else {
		   afficherMetadonnees(meta[ids[indexImage]]);
	   }  	
   	}
   
	function afficherMetadonnees(data) {
		$("#tpl-obs-meta").tmpl(data).appendTo('.img-cadre');
		window.resizeTo($(window).width(),hauteurSansMeta+215);
		$("#lien-voir-meta").html('Cacher les informations');
	}
   
   function cacherMetadonnees() {
	   window.resizeTo($(window).width(), hauteurSansMeta); 
	   $('#info-obs-meta').remove();
	   $("#lien-voir-meta").html('Informations sur cette image / Contacter l\'auteur');
	   metadonneesOuvertes = false;
   }
   
   $(document).ready(function() {
	   $('#precedent').click(function() {
		   imagePrecedente();
	   });
	   
	   $('#suivant').click(function() {
		   imageSuivante();
	   });
	   
	   if(urlImage != "null" && urlImage != "") {
		   indexImage = Array.indexOf(urls, urlImage);
		   $('#illustration').attr('src', urls[indexImage]);
	   }
	   
	   $('#illustration').load(function() {
			redimensionnerImage($(this));
	   });
	   
	   $('#illustration').click(function() {
			ouvrirFenetreIllustrationResultat($(this).attr("src").replace("L","X3L"), titre);
	   });
	   
	   $("#lien-voir-meta").click(function() {
		   metadonneesOuvertes = !metadonneesOuvertes;
		   if(metadonneesOuvertes) {
		   		chargerEtAfficherMetadonnees();  
		   } else {
			   	cacherMetadonnees();
		   }
	   });
	   
	   $("body").keydown(function(e) {
		   	if(e.keyCode == 37) { // gauche
		   		imagePrecedente();
		   	}
		   	else if(e.keyCode == 39) { // droite
		   		imageSuivante();
		   	}
		});
	     
	   $('#zone-pied').hide();
   });
 // -->
</script>
 
<!-- Squelette du contenu du tableau des observation -->
<script id="tpl-obs-meta" type="text/x-jquery-tmpl">
	<div id="info-obs-meta" class="importance1">
		<dl>
			<dt>Photo n°</dt><dd>${id}</dd>
			<dt>Titre</dt><dd>${$data["determination.nom_sci"]}</dd>
			<dt>Description</dt><dd>${$data['determination.libelle']}</dd>
			<dt>Localisation</dt><dd>${$data['station.commune']}</dd>
			<dt>Auteur</dt>
			<dd>
				${$data['auteur.libelle']}
				<a class="mailto" href="${contact_url}">(Contacter ...)</a>
			</dd>
			<dt>Date d'observation</dt><dd>${date}</dd>
			<dt>Licence</dt><dd><a class="lien-externe" href="http://www.tela-botanica.org/page:licence">CC-BY-SA</a></dd>
		</dl>
	</div>
</script>
 
<div id="info-img-galerie">
	<div class="conteneur-precedent">
		<a id="precedent" href="#" title="cliquez ici ou utilisez la flèche gauche pour afficher l'image précédente"> 
			<img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheGauche.jpg" alt="&lt;" />
		</a>
	</div>
	<div class="img-cadre">
			<img id="illustration" src="<?=$urls[0]?>" alt="" title="cliquez pour voir cette image dans son format original" /><br />
			<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>
	</div>
	<div class="conteneur-suivant">
		<a id="suivant" href="#" title="cliquez ici ou utilisez la flèche droite pour afficher l'image suivante">
			<img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheDroite.jpg" alt="&gt;" />
		</a>
	</div>
	<hr class="nettoyage" />
</div>

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

Subversion Repositories eFlore/Applications.eflore-consultation

(root)/trunk/modules/popup_galerie/squelettes/popup_galerie_illustrations.tpl.html – Rev 922 → 947