Subversion Repositories eFlore/Applications.cel

Rev

Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1480 aurelien 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="http://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[
12
   var urls = [<?= '"'.implode($urls, '","').'"'; ?>];
13
   var infos_images = <?= json_encode($infos_images); ?>;
14
   var indexImage = 0;
15
   var urlImage = "<?= $url_image; ?>";
16
   var tailleMax = 580;
17
 
18
   function redimensionnerImage(objet) {
19
 
20
	   objet.removeAttr("width");
21
	   objet.removeAttr("height");
22
 
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;
29
 
30
		   largeurImage = hauteurImage*rapport;
31
		   $('#illustration').attr("height", hauteurImage);
32
		   $('#illustration').attr("width", largeurImage);
33
	   }
34
	   hauteurFleches = ((hauteurImage+90)/2);
35
	   $('#info-img-galerie .conteneur-precedent').attr("top", hauteurFleches);
36
	   $('#info-img-galerie .conteneur-suivant').attr("top", hauteurFleches);
37
 
38
	   window.resizeTo(largeurImage+120,hauteurImage+120);
39
   }
40
 
41
   function imageSuivante() {
42
	   indexImage++;
43
	   if(indexImage >= urls.length) {
44
		   indexImage = 0;
45
	   }
46
	   afficherTitreImage();
47
	   $('#illustration').attr('src', urls[indexImage]);
48
   }
49
 
50
   function imagePrecedente() {
51
	   indexImage--;
52
	   if(indexImage <= 0) {
53
		   indexImage = urls.length - 1;
54
	   }
55
	   afficherTitreImage();
56
	   $('#illustration').attr('src', urls[indexImage]);
57
   }
58
 
59
   function afficherTitreImage() {
60
	   item = infos_images[urls[indexImage]];
61
	   var titre = item['titre'];
62
	   var pattern = new RegExp('^(.*\])');
63
	   pattern.compile(pattern);
64
	   var matches = pattern.exec(titre);
65
	   var remplacement = titre;
66
	   if(matches.length > 0) {
67
		   remplacement = matches[0];
68
	   }
69
       titre = titre.replace(remplacement, '<a href="'+item['lien']+'">'+remplacement+'</a>');
70
	   $('#bloc-infos-img').html(titre);
71
   }
72
 
73
   $(document).ready(function() {
74
	   $('#precedent').click(function() {
75
		   imagePrecedente();
76
	   });
77
 
78
	   $('#suivant').click(function() {
79
		   imageSuivante();
80
	   });
81
 
82
	   if(urlImage != "null" && urlImage != "") {
83
		   indexImage = Array.indexOf(urls, urlImage);
84
		   $('#illustration').attr('src', urls[indexImage]);
85
		   afficherTitreImage();
86
	   }
87
 
88
	   $('#illustration').load(function() {
89
			redimensionnerImage($(this));
90
	   });
91
 
92
	   $("body").keydown(function(e) {
93
		   	if(e.keyCode == 37) { // gauche
94
		   		imagePrecedente();
95
		   	}
96
		   	else if(e.keyCode == 39) { // droite
97
		   		imageSuivante();
98
		   	}
99
		});
100
   });
101
//]]>
102
</script>
103
 
104
<div id="info-img-galerie">
105
	<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">
107
			<img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheGauche.jpg" alt="&lt;" />
108
		</a>
109
	</div>
110
	<div class="img-cadre">
111
			<img id="illustration" src="<?=$urls[0]?>" alt="" /><br />
112
	</div>
113
	<div class="conteneur-suivant">
114
		<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;" />
116
		</a>
117
	</div>
118
	<hr class="nettoyage" />
119
	<div id="bloc-infos-img"></div>
120
</div>
121
</body>
122
</html>