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="<" /> |
</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=">" /> |
</a> |
</div> |
<hr class="nettoyage" /> |
<div id="bloc-infos-img"></div> |
</div> |
</body> |
</html> |