Subversion Repositories eFlore/Applications.cel

Rev

Rev 1480 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 1480 Rev 1495
1 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 1 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
<html>
 2 
<html>
3 
<head>
 3 
<head>
4 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 
<title></title>
 5 
<title></title>
6 
<link rel="stylesheet" type="text/css" href="<?=$url_css?>popup.css" media="screen" />
 6 
<link rel="stylesheet" type="text/css" href="<?=$url_css?>popup.css" media="screen" />
7 
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.6/jquery-1.6.min.js"></script>
 7 
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.6/jquery-1.6.min.js"></script>
8 
</head>
 8 
</head>
9 
<body>
 9 
<body>
10 
<script type="text/javascript">
 10 
<script type="text/javascript">
11 
//<![CDATA[
 11 
//<![CDATA[
12 
   var urls = [<?= '"'.implode($urls, '","').'"'; ?>];
12 
   var urls = [<?= '"'.implode($urls, '","').'"'; ?>];
13 
   var infos_images = <?= json_encode($infos_images); ?>;
 13 
   var infos_images = <?= json_encode($infos_images); ?>;
14 
   var indexImage = 0;
 14 
   var indexImage = 0;
15 
   var urlImage = "<?= $url_image; ?>";
 15 
   var urlImage = "<?= $url_image; ?>";
16 
   var tailleMax = 580;
 16 
   var tailleMax = 580;
17
17
18 
   function redimensionnerImage(objet) {
 18 
   function redimensionnerImage(objet) {
19
19
20 
	   objet.removeAttr("width");
20 
	   objet.removeAttr("width");
21 
	   objet.removeAttr("height");
 21 
	   objet.removeAttr("height");
22
22
23 
	   var hauteurImage = objet.height();
 23 
	   var hauteurImage = objet.height();
24 
	   var largeurImage = objet.width();
 24 
	   var largeurImage = objet.width();
25 
	   var rapport = 1;
 25 
	   var rapport = 1;
26 
	   if(hauteurImage > largeurImage && hauteurImage > tailleMax) {
 26 
	   if(hauteurImage > largeurImage && hauteurImage > tailleMax) {
27 
		   rapport = largeurImage/hauteurImage;
 27 
		   rapport = largeurImage/hauteurImage;
28 
		   hauteurImage = 580;
 28 
		   hauteurImage = 580;
29
29
30 
		   largeurImage = hauteurImage*rapport;
 30 
		   largeurImage = hauteurImage*rapport;
31 
		   $('#illustration').attr("height", hauteurImage);
 31 
		   $('#illustration').attr("height", hauteurImage);
32 
		   $('#illustration').attr("width", largeurImage);
 32 
		   $('#illustration').attr("width", largeurImage);
33 
	   }
 33 
	   }
34 
	   hauteurFleches = ((hauteurImage+90)/2);
34 
	   hauteurFleches = ((hauteurImage+90)/2);
35 
	   $('#info-img-galerie .conteneur-precedent').attr("top", hauteurFleches);
 35 
	   $('#info-img-galerie .conteneur-precedent').attr("top", hauteurFleches);
36 
	   $('#info-img-galerie .conteneur-suivant').attr("top", hauteurFleches);
 36 
	   $('#info-img-galerie .conteneur-suivant').attr("top", hauteurFleches);
37
37
38 
	   window.resizeTo(largeurImage+120,hauteurImage+120);
 38 
	   window.resizeTo(largeurImage+120,hauteurImage+120);
39 
   }
 39 
   }
40
40
41 
   function imageSuivante() {
 41 
   function imageSuivante() {
42 
	   indexImage++;
 42 
	   indexImage++;
43 
	   if(indexImage >= urls.length) {
 43 
	   if(indexImage >= urls.length) {
44 
		   indexImage = 0;
 44 
		   indexImage = 0;
45 
	   }
 45 
	   }
46 
	   afficherTitreImage();
 46 
	   afficherTitreImage();
47 
	   $('#illustration').attr('src', urls[indexImage]);
 47 
	   $('#illustration').attr('src', urls[indexImage]);
48 
   }
 48 
   }
49
49
50 
   function imagePrecedente() {
 50 
   function imagePrecedente() {
51 
	   indexImage--;
 51 
	   indexImage--;
52 
	   if(indexImage <= 0) {
 52 
	   if(indexImage <= 0) {
53 
		   indexImage = urls.length - 1;
 53 
		   indexImage = urls.length - 1;
54 
	   }
 54 
	   }
55 
	   afficherTitreImage();
 55 
	   afficherTitreImage();
56 
	   $('#illustration').attr('src', urls[indexImage]);
 56 
	   $('#illustration').attr('src', urls[indexImage]);
57 
   }
 57 
   }
58
58
59 
   function afficherTitreImage() {
 59 
   function afficherTitreImage() {
60 
	   item = infos_images[urls[indexImage]];
 60 
	   item = infos_images[urls[indexImage]];
61 
	   var titre = item['titre'];
 61 
	   var titre = item['titre'];
62 
	   var pattern = new RegExp('^(.*\])');
 62 
	   var infos = decouperTitre(titre);
63 
	   pattern.compile(pattern);
63 
	   var lienContact = '<?= $url_widget ?>?mode=contact&nn='+infos.nn+
64 
	   var matches = pattern.exec(titre);
 64 
			   			'&nom_sci='+infos.nom_sci+
65 
	   var remplacement = titre;
 65 
			   			'&date='+infos.date+
66 
	   if(matches.length > 0) {
 66 
			   			'&id_image='+item['guid'];
67 
		   remplacement = matches[0];
 67 
       titre = '<a href="'+item['lien']+'">'+infos.nom_sci+'</a> '+
68 
	   }
 - 
 
69 
       titre = titre.replace(remplacement, '<a href="'+item['lien']+'">'+remplacement+'</a>');
68 
       		   ' par <a class="lien_contact" href="'+lienContact+'">'+infos.auteur+'</a> '+
- 
 
 69 
       		   ' le '+infos.date+' ';
70 
	   $('#bloc-infos-img').html(titre);
 70 
	   $('#bloc-infos-img').html(titre);
71 
   }
 71 
   }
- 
 
 72
- 
 
 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(' par ');
- 
 
 77 
		var nn = '[nn'+tab_titre_suite[0];
- 
 
 78 
		var tab_titre_fin = tab_titre_suite[1].split(' le ');
- 
 
 79 
		var utilisateur = tab_titre_fin[0];
- 
 
 80 
		var date = tab_titre_fin[1];
- 
 
 81
- 
 
 82 
		var titre_decoupe = {'nom_sci' : nom_sci, 'nn' : nn, 'date' : date, 'auteur' : utilisateur};
- 
 
 83 
		return titre_decoupe;
- 
 
 84 
	}
- 
 
 85
- 
 
 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 
   }
72
90
73 
   $(document).ready(function() {
 91 
   $(document).ready(function() {
74 
	   $('#precedent').click(function() {
 92 
	   $('#precedent').click(function() {
75 
		   imagePrecedente();
 93 
		   imagePrecedente();
76 
	   });
 94 
	   });
77
95
78 
	   $('#suivant').click(function() {
 96 
	   $('#suivant').click(function() {
79 
		   imageSuivante();
 97 
		   imageSuivante();
80 
	   });
 98 
	   });
81
99
82 
	   if(urlImage != "null" && urlImage != "") {
 100 
	   if(urlImage != "null" && urlImage != "") {
83 
		   indexImage = Array.indexOf(urls, urlImage);
 101 
		   indexImage = Array.indexOf(urls, urlImage);
84 
		   $('#illustration').attr('src', urls[indexImage]);
 102 
		   $('#illustration').attr('src', urls[indexImage]);
85 
		   afficherTitreImage();
 103 
		   afficherTitreImage();
86 
	   }
 104 
	   }
87
105
88 
	   $('#illustration').load(function() {
 106 
	   $('#illustration').load(function() {
89 
			redimensionnerImage($(this));
 107 
			redimensionnerImage($(this));
90 
	   });
 108 
	   });
91
109
92 
	   $("body").keydown(function(e) {
 110 
	   $("body").keydown(function(e) {
93 
		   	if(e.keyCode == 37) { // gauche
 111 
		   	if(e.keyCode == 37) { // gauche
94 
		   		imagePrecedente();
 112 
		   		imagePrecedente();
95 
		   	}
 113 
		   	}
96 
		   	else if(e.keyCode == 39) { // droite
 114 
		   	else if(e.keyCode == 39) { // droite
97 
		   		imageSuivante();
 115 
		   		imageSuivante();
98 
		   	}
 116 
		   	}
99 
		});
 117 
		});
- 
 
 118
- 
 
 119 
	   $('.lien_contact').live('click', function(event) {
- 
 
 120 
		  event.preventDefault();
- 
 
 121 
		  ouvrirFenetreContact($(this));
- 
 
 122 
	   });
100 
   });
 123 
   });
101 
//]]>
 124 
//]]>
102 
</script>
 125 
</script>
103 
 
 126 
 
104 
<div id="info-img-galerie">
 127 
<div id="info-img-galerie">
105 
	<div class="conteneur-precedent">
 128 
	<div class="conteneur-precedent">
106 
		<a id="precedent" href="#" title="cliquez ici ou utilisez la flèche gauche pour afficher l'image précédente">
129 
		<a id="precedent" href="#" title="cliquez ici ou utilisez la flèche gauche pour afficher l'image précédente">
107 
			<img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheGauche.jpg" alt="&lt;" />
 130 
			<img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheGauche.jpg" alt="&lt;" />
108 
		</a>
 131 
		</a>
109 
	</div>
 132 
	</div>
110 
	<div class="img-cadre">
 133 
	<div class="img-cadre">
111 
			<img id="illustration" src="<?=$urls[0]?>" alt="" /><br />
 134 
			<img id="illustration" src="<?=$urls[0]?>" alt="" /><br />
112 
	</div>
 135 
	</div>
113 
	<div class="conteneur-suivant">
 136 
	<div class="conteneur-suivant">
114 
		<a id="suivant" href="#" title="cliquez ici ou utilisez la flèche droite pour afficher l'image suivante">
 137 
		<a id="suivant" href="#" title="cliquez ici ou utilisez la flèche droite pour afficher l'image suivante">
115 
			<img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheDroite.jpg" alt="&gt;" />
 138 
			<img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheDroite.jpg" alt="&gt;" />
116 
		</a>
 139 
		</a>
117 
	</div>
 140 
	</div>
118 
	<hr class="nettoyage" />
 141 
	<hr class="nettoyage" />
119 
	<div id="bloc-infos-img"></div>
 142 
	<div id="bloc-infos-img"></div>
120 
</div>
 143 
</div>
121 
</body>
 144 
</body>
122 
</html>
 145 
</html>