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'];
1495 aurelien 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> '+
68
       		   ' par <a class="lien_contact" href="'+lienContact+'">'+infos.auteur+'</a> '+
69
       		   ' le '+infos.date+' ';
1480 aurelien 70
	   $('#bloc-infos-img').html(titre);
71
   }
72
 
1495 aurelien 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
   }
90
 
1480 aurelien 91
   $(document).ready(function() {
92
	   $('#precedent').click(function() {
93
		   imagePrecedente();
94
	   });
95
 
96
	   $('#suivant').click(function() {
97
		   imageSuivante();
98
	   });
99
 
100
	   if(urlImage != "null" && urlImage != "") {
101
		   indexImage = Array.indexOf(urls, urlImage);
102
		   $('#illustration').attr('src', urls[indexImage]);
103
		   afficherTitreImage();
104
	   }
105
 
106
	   $('#illustration').load(function() {
107
			redimensionnerImage($(this));
108
	   });
109
 
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
		});
1495 aurelien 118
 
119
	   $('.lien_contact').live('click', function(event) {
120
		  event.preventDefault();
121
		  ouvrirFenetreContact($(this));
122
	   });
1480 aurelien 123
   });
124
//]]>
125
</script>
126
 
127
<div id="info-img-galerie">
128
	<div class="conteneur-precedent">
129
		<a id="precedent" href="#" title="cliquez ici ou utilisez la flèche gauche pour afficher l'image précédente">
130
			<img style="border:none" src="http://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="cliquez ici ou utilisez la flèche droite pour afficher l'image suivante">
138
			<img style="border:none" src="http://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>