Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 1479 → Rev 1480

/trunk/widget/modules/photo/squelettes/popup.tpl.html
New file
0,0 → 1,122
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="<?=$url_css?>popup.css" media="screen" />
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.6/jquery-1.6.min.js"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
var urls = [<?= '"'.implode($urls, '","').'"'; ?>];
var infos_images = <?= json_encode($infos_images); ?>;
var indexImage = 0;
var urlImage = "<?= $url_image; ?>";
var tailleMax = 580;
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);
}
hauteurFleches = ((hauteurImage+90)/2);
$('#info-img-galerie .conteneur-precedent').attr("top", hauteurFleches);
$('#info-img-galerie .conteneur-suivant').attr("top", hauteurFleches);
window.resizeTo(largeurImage+120,hauteurImage+120);
}
function imageSuivante() {
indexImage++;
if(indexImage >= urls.length) {
indexImage = 0;
}
afficherTitreImage();
$('#illustration').attr('src', urls[indexImage]);
}
function imagePrecedente() {
indexImage--;
if(indexImage <= 0) {
indexImage = urls.length - 1;
}
afficherTitreImage();
$('#illustration').attr('src', urls[indexImage]);
}
function afficherTitreImage() {
item = infos_images[urls[indexImage]];
var titre = item['titre'];
var pattern = new RegExp('^(.*\])');
pattern.compile(pattern);
var matches = pattern.exec(titre);
var remplacement = titre;
if(matches.length > 0) {
remplacement = matches[0];
}
titre = titre.replace(remplacement, '<a href="'+item['lien']+'">'+remplacement+'</a>');
$('#bloc-infos-img').html(titre);
}
$(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]);
afficherTitreImage();
}
$('#illustration').load(function() {
redimensionnerImage($(this));
});
$("body").keydown(function(e) {
if(e.keyCode == 37) { // gauche
imagePrecedente();
}
else if(e.keyCode == 39) { // droite
imageSuivante();
}
});
});
//]]>
</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="" /><br />
</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 id="bloc-infos-img"></div>
</div>
</body>
</html>