New file |
0,0 → 1,145 |
<!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="https://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 infos = decouperTitre(titre); |
var lienContact = '<?= $url_widget ?>?mode=contact&nn='+infos.nn+ |
'&nom_sci='+infos.nom_sci+ |
'&date='+infos.date+ |
'&id_image='+item['guid']; |
titre = '<a href="'+item['lien']+'">'+infos.nom_sci+'</a> '+ |
' door <a class="lien_contact" href="'+lienContact+'">'+infos.auteur+'</a> '+ |
' op '+infos.date+' '; |
$('#bloc-infos-img').html(titre); |
} |
|
function decouperTitre(titre) { |
var tab_titre = titre.split('[nn'); |
var nom_sci = tab_titre[0]; |
var tab_titre_suite = tab_titre[1].split(' door '); |
var nn = '[nn'+tab_titre_suite[0]; |
var tab_titre_fin = tab_titre_suite[1].split(' op '); |
var utilisateur = tab_titre_fin[0]; |
var date = tab_titre_fin[1]; |
|
var titre_decoupe = {'nom_sci' : nom_sci, 'nn' : nn, 'date' : date, 'auteur' : utilisateur}; |
return titre_decoupe; |
} |
|
function ouvrirFenetreContact(lienImage) { |
var url = lienImage.attr("href"); |
window.open(url, '_blank', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no, width='+(400)+', height='+(550)); |
} |
|
$(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(); |
} |
}); |
|
$('.lien_contact').live('click', function(event) { |
event.preventDefault(); |
ouvrirFenetreContact($(this)); |
}); |
}); |
//]]> |
</script> |
|
<div id="info-img-galerie"> |
<div class="conteneur-precedent"> |
<a id="precedent" href="#" title="Klik hier of maak gebruik van het pijltje naar links om de vorige afbeelding weer te geven"> |
<img style="border:none" src="https://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="Klik hier of maak gebruik van het pijltje naar rechts om de volgende afbeelding weer te geven"> |
<img style="border:none" src="https://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> |