Subversion Repositories eFlore/Applications.cel

Rev

Rev 3041 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
3041 killian 1 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
<html>
3 
<head>
4 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 
<title></title>
6 
<link rel="stylesheet" type="text/css" href="<?=$url_css?>popup.css" media="screen" />
7 
<script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/1.6/jquery-1.6.min.js"></script>
8 
</head>
9 
<body>
10 
<script type="text/javascript">
11 
//<![CDATA[
3630 idir 12 
   var urls = [<?= '"'.implode($urls, '","').'"'; ?>];
3041 killian 13 
   var infos_images = <?= json_encode($infos_images); ?>;
14 
   var indexImage = 0;
15 
   var urlImage = "<?= $url_image; ?>";
16 
   var tailleMax = 580;
3630 idir 17 
 
3041 killian 18 
   function redimensionnerImage(objet) {
3630 idir 19 
 
20 
	   objet.removeAttr("width");
3041 killian 21 
	   objet.removeAttr("height");
3630 idir 22 
 
3041 killian 23 
	   var hauteurImage = objet.height();
24 
	   var largeurImage = objet.width();
25 
	   var rapport = 1;
26 
	   if(hauteurImage > largeurImage && hauteurImage > tailleMax) {
27 
		   rapport = largeurImage/hauteurImage;
28 
		   hauteurImage = 580;
3630 idir 29 
 
3041 killian 30 
		   largeurImage = hauteurImage*rapport;
31 
		   $('#illustration').attr("height", hauteurImage);
32 
		   $('#illustration').attr("width", largeurImage);
33 
	   }
3630 idir 34 
	   hauteurFleches = ((hauteurImage+90)/2);
3041 killian 35 
	   $('#info-img-galerie .conteneur-precedent').attr("top", hauteurFleches);
36 
	   $('#info-img-galerie .conteneur-suivant').attr("top", hauteurFleches);
3630 idir 37 
 
3041 killian 38 
	   window.resizeTo(largeurImage+120,hauteurImage+120);
39 
   }
3630 idir 40 
 
3041 killian 41 
   function imageSuivante() {
42 
	   indexImage++;
43 
	   if(indexImage >= urls.length) {
44 
		   indexImage = 0;
45 
	   }
46 
	   afficherTitreImage();
47 
	   $('#illustration').attr('src', urls[indexImage]);
48 
   }
3630 idir 49 
 
3041 killian 50 
   function imagePrecedente() {
51 
	   indexImage--;
52 
	   if(indexImage <= 0) {
53 
		   indexImage = urls.length - 1;
54 
	   }
55 
	   afficherTitreImage();
56 
	   $('#illustration').attr('src', urls[indexImage]);
57 
   }
3630 idir 58 
 
3041 killian 59 
   function afficherTitreImage() {
60 
	   item = infos_images[urls[indexImage]];
61 
	   var titre = item['titre'];
62 
	   var infos = decouperTitre(titre);
63 
	   var lienContact = '<?= $url_widget ?>?mode=contact&nn='+infos.nn+
64 
			   			'&nom_sci='+infos.nom_sci+
65 
			   			'&date='+infos.date+
66 
			   			'&id_image='+item['guid'];
67 
       titre = '<a href="'+item['lien']+'">'+infos.nom_sci+'</a> '+
3630 idir 68 
       		   ' door <a class="lien_contact" href="'+lienContact+'">'+infos.auteur+'</a> '+
69 
       		   ' op '+infos.date+' ';
3041 killian 70 
	   $('#bloc-infos-img').html(titre);
71 
   }
3630 idir 72 
 
3041 killian 73 
   function decouperTitre(titre) {
74 
		var tab_titre = titre.split('[nn');
75 
		var nom_sci = tab_titre[0];
76 
		var tab_titre_suite = tab_titre[1].split(' door ');
77 
		var nn = '[nn'+tab_titre_suite[0];
78 
		var tab_titre_fin = tab_titre_suite[1].split(' op ');
79 
		var utilisateur = tab_titre_fin[0];
80 
		var date = tab_titre_fin[1];
3630 idir 81 
 
3041 killian 82 
		var titre_decoupe = {'nom_sci' : nom_sci, 'nn' : nn, 'date' : date, 'auteur' : utilisateur};
83 
		return titre_decoupe;
84 
	}
3630 idir 85 
 
3041 killian 86 
   function ouvrirFenetreContact(lienImage) {
87 
		var url = lienImage.attr("href");
88 
		window.open(url, '_blank', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no, width='+(400)+', height='+(550));
89 
   }
3630 idir 90 
 
3041 killian 91 
   $(document).ready(function() {
92 
	   $('#precedent').click(function() {
93 
		   imagePrecedente();
94 
	   });
3630 idir 95 
 
3041 killian 96 
	   $('#suivant').click(function() {
97 
		   imageSuivante();
98 
	   });
3630 idir 99 
 
3041 killian 100 
	   if(urlImage != "null" && urlImage != "") {
101 
		   indexImage = Array.indexOf(urls, urlImage);
102 
		   $('#illustration').attr('src', urls[indexImage]);
103 
		   afficherTitreImage();
104 
	   }
3630 idir 105 
 
3041 killian 106 
	   $('#illustration').load(function() {
107 
			redimensionnerImage($(this));
108 
	   });
3630 idir 109 
 
3041 killian 110 
	   $("body").keydown(function(e) {
111 
		   	if(e.keyCode == 37) { // gauche
112 
		   		imagePrecedente();
113 
		   	}
114 
		   	else if(e.keyCode == 39) { // droite
115 
		   		imageSuivante();
116 
		   	}
117 
		});
3630 idir 118 
 
3041 killian 119 
	   $('.lien_contact').live('click', function(event) {
120 
		  event.preventDefault();
3630 idir 121 
		  ouvrirFenetreContact($(this));
3041 killian 122 
	   });
123 
   });
124 
//]]>
125 
</script>
126 
 
127 
<div id="info-img-galerie">
128 
	<div class="conteneur-precedent">
129 
		<a id="precedent" href="#" title="Klik hier of maak gebruik van het pijltje naar links om de vorige afbeelding weer te geven">
130 
			<img style="border:none" src="https://www.tela-botanica.org/sites/commun/generique/images/flecheGauche.jpg" alt="&lt;" />
131 
		</a>
132 
	</div>
133 
	<div class="img-cadre">
134 
			<img id="illustration" src="<?=$urls[0]?>" alt="" /><br />
135 
	</div>
136 
	<div class="conteneur-suivant">
137 
		<a id="suivant" href="#" title="Klik hier of maak gebruik van het pijltje naar rechts om de volgende afbeelding weer te geven">
138 
			<img style="border:none" src="https://www.tela-botanica.org/sites/commun/generique/images/flecheDroite.jpg" alt="&gt;" />
139 
		</a>
140 
	</div>
141 
	<hr class="nettoyage" />
142 
	<div id="bloc-infos-img"></div>
143 
</div>
144 
</body>
145 
</html>