Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 3864 → Rev 3865

/branches/v3.01-serpe/widget/modules/photo/squelettes/photo.tpl.html
New file
0,0 → 1,208
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Photographies publiques du CEL - Tela Botanica</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-language" content="fr" />
<meta name="revisit-after" content="15 days" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Tela Botanica" />
<meta name="keywords" content="Tela Botanica, photographie, CEL" />
<meta name="description" content="Widget de présentation des dernières photo publiées sur le Carnet en Ligne de Tela Botanica" />
 
<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Widget photo du CeL" />
<meta property="og:site_name" content="Tela Botanica" />
<meta property="og:description" content="Mini-galerie photo des observations publiques du Carnet en Ligne" />
<?php
if (isset($items[0])) {
$iz = $items[0];
$izUrl = sprintf($iz['url_tpl'], 'CRS');
echo '<meta property="og:image" content="' . $izUrl . '" />';
} else {
echo '<meta property="og:image" content="https://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />'
.'<meta property="og:image:type" content="image/png" />'
.'<meta property="og:image:width" content="256" />'
.'<meta property="og:image:height" content="256" />';
}
?>
<meta property="og:locale" content="fr_FR" />
 
<!-- Spécial mobile -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Favicones -->
<link rel="icon" type="image/png" href="https://resources.tela-botanica.org/tb/img/16x16/favicon.png" />
<link rel="shortcut icon" type="image/x-icon" href="https://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
<!-- Feuilles de styles -->
<link rel="stylesheet" type="text/css" href="https://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?=$url_css?>photo.css" media="screen" />
<style type="text/css">
html {
overflow:hidden;
}
body{
overflow:hidden;
padding:0;
margin:0;
width:100%;
height:100%;
background-color:#DDDDDD;
color:black;
}
#cel-photo-contenu<?=$id?>, #cel-galerie-photo<?=$id?>{
width:<?=(($colonne * 69))?>px;
}
#cel-galerie-photo<?=$id?> #cel-photo-extra<?=$id?> img{
width:<?=(($colonne * 69)-6)?>px;
}
</style>
<!-- Javascript : bibliothèques -->
<script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/1.6/jquery-1.6.min.js"></script>
<script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.js"></script>
 
<!-- Google Analytics -->
<?php if($prod): ?>
<?php include "analytics.html"; ?>
<?php endif; ?>
</head>
<body>
<!-- WIDGET:CEL:PHOTO - DEBUT -->
<div id="cel-photo-contenu<?=$id?>" class="cel-photo-contenu">
<?php if (isset($erreurs) || isset($informations)) : ?>
<h1>Erreur &amp; informations</h1>
<p>Impossible d'afficher le flux.</p>
<!-- Affichage des erreurs et messages d'information : -->
<?php if ($erreurs) : ?>
<?php foreach ($erreurs as $erreur) : ?>
<p class="erreur"><?=$erreur;?></p>
<?php endforeach; ?>
<?php endif; ?>
<?php if ($informations) : ?>
<?php foreach ($informations as $information) : ?>
<p class="info"><?=$information;?></p>
<?php endforeach; ?>
<?php endif; ?>
<?php else : ?>
<h1>
<? if (!empty($titre)) : ?>
<?=$titre?>
<? endif ; ?>
<? if($icone_rss) : ?>
<a href="<?=$flux_rss_url?>"
class="cel-photo-flux"
title="Suivre les images"
onclick="window.open(this.href);return false;">
<img src="https://www.tela-botanica.org/sites/commun/generique/images/rss.png" alt="Suivre les images" />
</a>
<? endif; ?>
</h1>
<div id="cel-galerie-photo<?=$id?>">
<?php foreach ($items as $item) : ?>
<div class="cel-photo">
<a href="<?=sprintf($item['url_tpl'], 'XL')?>" class="cel-img" title="<?=$item['titre']?> - Publiée le <?=$item['date']?> - GUID : <?=$item['guid']?>" rel="galerie-princ<?=$id?>">
<img src="<?=sprintf($item['url_tpl'], 'CRX2S')?>" alt="<?=$item['titre']?>"/>
</a>
<div id="cel-info-<?=$item['guid']?>" class="cel-infos">
<strong>
<?php if ($item['eflore_url'] != '#' && $item['eflore_url'] != '') { ?>
<a class="cel-img-titre" href="<?=$item['eflore_url']?>"
onclick="window.open(this.href);return false;"
title="Cliquez pour accéder à la fiche eFlore">
<?=$item['infos']['nom_sci']?>
</a> par
<a class="cel-img-contact"
href="?mode=contact&nn=<?= urlencode($item['infos']['nn']) ;?>&nom_sci=<?= urlencode($item['infos']['nom_sci']) ;?>&date=<?= urlencode($item['infos']['date']) ;?>&id_image=<?= $item['guid']; ?>"
title="Cliquez pour contacter l'auteur de la photo">
<?=$item['infos']['auteur']?>
</a>
à <?= $item['infos']['localite'] ?>
le <?=$item['infos']['date']?>
<?php } else { ?>
<?=$item['titre']?>
<?php } ?>
</strong><br />
<span class="cel-img-date">Publiée le <?=$item['date']?></span>
</div>
</div>
<?php endforeach; ?>
<?php if ($extra_actif) : ?>
<div id="cel-photo-extra<?=$id?>" class="cel-photo-extra cel-photo">
<a href="<?=sprintf($extra['url_tpl'], 'XL')?>" class="cel-img" title="<?=$extra['titre']?> - Publiée le <?=$extra['date']?> - GUID : <?=$extra['guid']?>" rel="galerie-princ<?=$id?>">
<img src="<?=sprintf($extra['url_tpl'], 'CRS')?>" alt="<?=$extra['titre']?>"/>
</a>
</div>
</div>
<?php endif ?>
<p class="cel-photo-pieds discretion nettoyage">
<span class="cel-photo-source">
Source :
<a href="http://www.tela-botanica.org/page:cel" title="Carnet en Ligne" onclick="window.open(this.href);return false;">
CEL
</a>
</span>
<span class="cel-photo-date-generation">Au <?=strftime('%A %d %B %Y à %H:%M:%S')?></span>
</p>
<script type="text/Javascript">
//<![CDATA[
var utiliseFancybox = "<?= $utilise_fancybox; ?>";
if(utiliseFancybox) {
$('a.cel-img').attr('rel', 'galerie-princ<?=$id?>').fancybox({
transitionIn:'elastic',
transitionOut:'elastic',
speedIn :600,
speedOut:200,
overlayShow:true,
titleShow:true,
titlePosition:'inside',
titleFormat:function (titre, currentArray, currentIndex, currentOpts) {
var motif = /GUID : ([0-9]+)$/;
motif.exec(titre);
var guid = RegExp.$1;
var info = $('#cel-info-'+guid).clone().html();
var tpl =
'<div class="cel-legende">'+
'<p class="cel-legende-vei">'+'Image n°' + (currentIndex + 1) + ' sur ' + currentArray.length +'<\/p>'+
(titre && titre.length ? '<p>'+info+'<\/p>' : '' )+
'<\/div>';
return tpl;
}
});
} else {
$('a.cel-img').click(function(event) {
ouvrirFenetrePopup($(this));
event.preventDefault();
});
}
$(document).ready(function() {
$('a.cel-img-contact').live('click', function(event) {
event.preventDefault();
ouvrirFenetreContact($(this));
});
});
function ouvrirFenetrePopup(lienImage) {
var url = "?mode=popup&url_image="+lienImage.attr('href')+'&galerie_id=<?= $galerie_id ?>';
window.open(url, '', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no, width='+(700)+', height='+(650));
}
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));
}
//]]>
</script>
<?php endif; ?>
</div>
<!-- WIDGET:CEL:PHOTO - FIN -->
</body>
</html>
/branches/v3.01-serpe/widget/modules/photo/squelettes/contact.tpl.html
New file
0,0 → 1,133
<!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>Contacter l'auteur de l'image</title>
<link rel="stylesheet" type="text/css" href="<?=$url_css?>contact.css" media="screen" />
<script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/1.6.2/jquery-1.6.2.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap.css">
<script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/validate/1.8.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/validate/1.8.1/messages_fr.js"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
var donnees = new Array();
function envoyerCourriel() {
//console.log('Formulaire soumis');
if ($("#form-contact").valid()) {
var destinataireId = $("#fc_destinataire_id").attr('value');
var typeEnvoi = $("#fc_type_envoi").attr('value');
// l'envoi aux non inscrits passe par le service intermédiaire du cel
// qui va récupérer le courriel associé à l'image indiquée
var urlMessage = "http://api.tela-botanica.org/service:cel:celMessage/image/"+destinataireId;
var erreurMsg = "";
console.log($(this));
$.each($("#form-contact").serializeArray(), function (index, champ) {
var cle = champ.name;
cle = cle.replace(/^fc_/, '');
if (cle == 'sujet') {
champ.value += " - Carnet en ligne - Tela Botanica";
}
if (cle == 'message') {
champ.value += "\n--\n"+
"Ce message vous est envoyé par l'intermédiaire du widget photo "+
"du Carnet en Ligne du réseau Tela Botanica.\n"+
"http://www.tela-botanica.org/widget:cel:photo";
}
donnees[index] = {'name':cle,'value':champ.value};
});
$.ajax({
type : "POST",
cache : false,
url : urlMessage,
data : donnees,
beforeSend : function() {
$(".msg").remove();
},
success : function(data) {
$("#fc-zone-dialogue").append('<pre class="msg info">'+data.message+'</pre>');
},
error : function(jqXHR, textStatus, errorThrown) {
erreurMsg += "Erreur Ajax :\ntype : "+textStatus+' '+errorThrown+"\n";
reponse = jQuery.parseJSON(jqXHR.responseText);
if (reponse != null) {
$.each(reponse, function (cle, valeur) {
erreurMsg += valeur + "\n";
});
}
},
complete : function(jqXHR, textStatus) {
var debugMsg = '';
if (jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
if (debugInfos != null) {
$.each(debugInfos, function (cle, valeur) {
debugMsg += valeur + "\n";
});
}
}
if (erreurMsg != '') {
$("#fc-zone-dialogue").append('<p class="msg">'+
'Une erreur est survenue lors de la transmission de votre message.'+'<br />'+
'Vous pouvez signaler le disfonctionnement à <a href="'+
'mailto:cel-remarques@tela-botanica.org'+'?'+
'subject=Disfonctionnement du widget carto'+
"&body="+erreurMsg+"\nDébogage :\n"+debugMsg+
'">cel-remarques@tela-botanica.org</a>.'+
'</p>');
}
}
});
}
return false;
}
function initialiserFormulaireContact() {
$("#form-contact").validate({
rules: {
fc_sujet : "required",
fc_message : "required",
fc_utilisateur_courriel : {
required : true,
email : true}
}
});
$("#form-contact").live("submit", function(event) {
event.preventDefault();
envoyerCourriel();
});
$("#fc_annuler").live("click", function() {window.close();});
}
$(document).ready(function() {
initialiserFormulaireContact();
});
//]]>
</script>
<!-- Squelette du formulaire de contact -->
<div id="tpl-form-contact">
<form id="form-contact" method="post" action="">
<div id="fc-zone-dialogue"></div>
<div>
<div><label for="fc_sujet">Sujet</label></div>
<div><input id="fc_sujet" name="fc_sujet" value="<?= $donnees['sujet'] ?>"/></div>
<div><label for="fc_message">Message</label></div>
<div><textarea id="fc_message" name="fc_message"><?= $donnees['message'] ?></textarea></div>
<div><label for="fc_utilisateur_courriel" title="Utilisez le courriel avec lequel vous êtes inscrit à Tela Botanica">Votre courriel</label></div>
<div><input id="fc_utilisateur_courriel" name="fc_utilisateur_courriel"/></div>
</div>
<p>
<input id="fc_destinataire_id" name="fc_destinataire_id" type="hidden" value="<?= $donnees['id_image'] ?>" />
<input type="hidden" name="fc_type_envoi" id="fc_type_envoi" value="non-inscrit" />
<input id="fc_annuler" type="button" value="Annuler">
<input id="fc_effacer" type="reset" value="Effacer">
<input id="fc_envoyer" type="submit" value="Envoyer" />
</p>
</form>
</div>
</body>
</html>
/branches/v3.01-serpe/widget/modules/photo/squelettes/photo_ajax.tpl.html
New file
0,0 → 1,145
<!-- WIDGET:CEL:PHOTO - DEBUT -->
<div id="cel-photo-contenu<?=$id?>" class="cel-photo-contenu">
<!-- Feuilles de styles -->
<style type="text/css">
#cel-photo-contenu<?=$id?>, #cel-galerie-photo<?=$id?>{
width:<?=(($colonne * 69))?>px;
}
#cel-galerie-photo<?=$id?> #cel-photo-extra<?=$id?> img{
width:<?=(($colonne * 69)-6)?>px;
}
</style>
<?php if (isset($erreurs) || isset($informations)) : ?>
<h1>Erreur &amp; informations</h1>
<p>Impossible d'afficher le flux.</p>
<!-- Affichage des erreurs et messages d'information : -->
<?php if ($erreurs) : ?>
<?php foreach ($erreurs as $erreur) : ?>
<p class="erreur"><?=$erreur;?></p>
<?php endforeach; ?>
<?php endif; ?>
<?php if ($informations) : ?>
<?php foreach ($informations as $information) : ?>
<p class="info"><?=$information;?></p>
<?php endforeach; ?>
<?php endif; ?>
<?php else : ?>
<h1>
<? if (!empty($titre)) : ?>
<?=$titre?>
<? endif ; ?>
<? if($icone_rss) : ?>
<a href="<?=$flux_rss_url?>"
class="cel-photo-flux"
title="Suivre les images"
onclick="window.open(this.href);return false;">
<img src="https://www.tela-botanica.org/sites/commun/generique/images/rss.png" alt="Suivre les images" />
</a>
<? endif; ?>
</h1>
<div id="cel-galerie-photo<?=$id?>">
<?php foreach ($items as $item) : ?>
<div class="cel-photo">
<a href="<?=sprintf($item['url_tpl'], 'XL')?>" class="cel-img" title="<?=$item['titre']?> - Publiée le <?=$item['date']?> - GUID : <?=$item['guid']?>" rel="galerie-princ<?=$id?>">
<img src="<?=sprintf($item['url_tpl'], 'CRX2S')?>" alt="<?=$item['titre']?>"/>
</a>
<div id="cel-info-<?=$item['guid']?>" class="cel-infos">
<strong>
<?php if ($item['eflore_url'] != '#' && $item['eflore_url'] != '') { ?>
<a class="cel-img-titre" href="<?=$item['eflore_url']?>"
onclick="window.open(this.href);return false;"
title="Cliquez pour accéder à la fiche eFlore">
<?=$item['infos']['nom_sci']?>
</a> par
<a class="cel-img-contact"
href="<?= $url_widget ?>?mode=contact&nn=<?= urlencode($item['infos']['nn']) ;?>&nom_sci=<?= urlencode($item['infos']['nom_sci']) ;?>&date=<?= urlencode($item['infos']['date']) ;?>&id_image=<?= $item['guid']; ?>"
title="Cliquez pour contacter l'auteur de la photo">
<?=$item['infos']['auteur']?>
</a>
<?php if (! empty($item['infos']['localite'])): ?>
à <?= $item['infos']['localite'] ?>
<?php endif; ?>
le <?=$item['infos']['date']?>
<?php } else { ?>
<?=$item['titre']?>
<?php } ?>
</strong><br />
<span class="cel-img-date">Publiée le <?=$item['date']?></span>
</div>
</div>
<?php endforeach; ?>
<?php if ($extra_actif) : ?>
<div id="cel-photo-extra<?=$id?>" class="cel-photo cel-photo-extra">
<a href="<?=sprintf($extra['url_tpl'], 'XL')?>" class="cel-img" title="<?=$extra['titre']?> - Publiée le <?=$extra['date']?> - GUID : <?=$extra['guid']?>" rel="galerie-princ<?=$id?>">
<img src="<?=sprintf($extra['url_tpl'], 'CRS')?>" alt="<?=$extra['titre']?>"/>
</a>
</div>
</div>
<?php endif ?>
<p class="cel-photo-pieds discretion nettoyage">
<span class="cel-photo-source">
Source :
<a href="http://www.tela-botanica.org/page:cel" title="Carnet en Ligne" onclick="window.open(this.href);return false;">
CEL
</a>
</span>
<span class="cel-photo-date-generation">Au <?=strftime('%A %d %B %Y à %H:%M:%S')?></span>
</p>
<script type="text/Javascript">
//<![CDATA[
var utiliseFancybox = "<?= $utilise_fancybox; ?>";
if(utiliseFancybox) {
$(document).ready(function() {
$('a.cel-img').attr('rel', 'galerie-princ<?=$id?>').fancybox({
transitionIn:'elastic',
transitionOut:'elastic',
speedIn :600,
speedOut:200,
overlayShow:true,
titleShow:true,
titlePosition:'inside',
titleFormat:function (titre, currentArray, currentIndex, currentOpts) {
var motif = /GUID : ([0-9]+)$/;
motif.exec(titre);
var guid = RegExp.$1;
var info = $('#cel-info-'+guid).clone().html();
var tpl =
'<div class="cel-legende">'+
'<p class="cel-legende-vei">'+'Image n°' + (currentIndex + 1) + ' sur ' + currentArray.length +'<\/p>'+
(titre && titre.length ? '<p>'+info+'<\/p>' : '' )+
'<\/div>';
return tpl;
}
});
});
} else {
$('a.cel-img').click(function(event) {
ouvrirFenetrePopup($(this));
event.preventDefault();
});
}
$(document).ready(function() {
$('a.cel-img-contact').live('click', function(event) {
event.preventDefault();
ouvrirFenetreContact($(this));
});
});
function ouvrirFenetrePopup(lienImage) {
var url = "?mode=popup&url_image="+lienImage.attr('href')+'&galerie_id=<?= $galerie_id ?>';
window.open(url, '', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no, width='+(700)+', height='+(650));
}
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));
}
//]]>
</script>
<?php endif; ?>
</div>
<!-- WIDGET:CEL:PHOTO - FIN -->
/branches/v3.01-serpe/widget/modules/photo/squelettes/popup_nl.tpl.html
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="&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="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="&gt;" />
</a>
</div>
<hr class="nettoyage" />
<div id="bloc-infos-img"></div>
</div>
</body>
</html>
/branches/v3.01-serpe/widget/modules/photo/squelettes/photo_nl.tpl.html
New file
0,0 → 1,208
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Publieke foto's CEL - Tela Botanica</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-language" content="fr" />
<meta name="revisit-after" content="15 days" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Tela Botanica" />
<meta name="keywords" content="Tela Botanica, foto, CEL" />
<meta name="description" content="Presentatiewidget van de meest recente foto’s die op de ‘Carnet en Ligne’ van Tela Botanica werden gepubliceerd" />
 
<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Widgetfoto CeL" />
<meta property="og:site_name" content="Tela Botanica" />
<meta property="og:description" content="Minifotoreeks publieke waarnemingen van de ‘Carnet en Ligne’" />
<?php
if (isset($items[0])) {
$iz = $items[0];
$izUrl = sprintf($iz['url_tpl'], 'CRS');
echo '<meta property="og:image" content="' . $izUrl . '" />';
} else {
echo '<meta property="og:image" content="https://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />'
.'<meta property="og:image:type" content="image/png" />'
.'<meta property="og:image:width" content="256" />'
.'<meta property="og:image:height" content="256" />';
}
?>
<meta property="og:locale" content="fr_FR" />
 
<!-- Spécial mobile -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Favicones -->
<link rel="icon" type="image/png" href="https://resources.tela-botanica.org/tb/img/16x16/favicon.png" />
<link rel="shortcut icon" type="image/x-icon" href="https://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
<!-- Feuilles de styles -->
<link rel="stylesheet" type="text/css" href="https://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?=$url_css?>photo.css" media="screen" />
<style type="text/css">
html {
overflow:hidden;
}
body{
overflow:hidden;
padding:0;
margin:0;
width:100%;
height:100%;
background-color:#DDDDDD;
color:black;
}
#cel-photo-contenu<?=$id?>, #cel-galerie-photo<?=$id?>{
width:<?=(($colonne * 69))?>px;
}
#cel-galerie-photo<?=$id?> #cel-photo-extra<?=$id?> img{
width:<?=(($colonne * 69)-6)?>px;
}
</style>
<!-- Javascript : bibliothèques -->
<script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/1.6/jquery-1.6.min.js"></script>
<script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.js"></script>
 
<!-- Google Analytics -->
<?php if($prod): ?>
<?php include "analytics.html"; ?>
<?php endif; ?>
</head>
<body>
<!-- WIDGET:CEL:PHOTO - DEBUT -->
<div id="cel-photo-contenu<?=$id?>" class="cel-photo-contenu">
<?php if (isset($erreurs) || isset($informations)) : ?>
<h1>Fouten en informatie</h1>
<p>Kan flow niet weergeven</p>
<!-- Affichage des erreurs et messages d'information : -->
<?php if ($erreurs) : ?>
<?php foreach ($erreurs as $erreur) : ?>
<p class="erreur"><?=$erreur;?></p>
<?php endforeach; ?>
<?php endif; ?>
<?php if ($informations) : ?>
<?php foreach ($informations as $information) : ?>
<p class="info"><?=$information;?></p>
<?php endforeach; ?>
<?php endif; ?>
<?php else : ?>
<h1>
<? if (!empty($titre)) : ?>
<?=$titre?>
<? endif ; ?>
<? if($icone_rss) : ?>
<a href="<?=$flux_rss_url?>"
class="cel-photo-flux"
title="Afbeeldingen volgen"
onclick="window.open(this.href);return false;">
<img src="https://www.tela-botanica.org/sites/commun/generique/images/rss.png" alt="Afbeeldingen volgen" />
</a>
<? endif; ?>
</h1>
<div id="cel-galerie-photo<?=$id?>">
<?php foreach ($items as $item) : ?>
<div class="cel-photo">
<a href="<?=sprintf($item['url_tpl'], 'XL')?>" class="cel-img" title="<?=$item['titre']?> - Gepubliceerd op <?=$item['date']?> - GUID : <?=$item['guid']?>" rel="galerie-princ<?=$id?>">
<img src="<?=sprintf($item['url_tpl'], 'CRX2S')?>" alt="<?=$item['titre']?>"/>
</a>
<div id="cel-info-<?=$item['guid']?>" class="cel-infos">
<strong>
<?php if ($item['eflore_url'] != '#' && $item['eflore_url'] != '') { ?>
<a class="cel-img-titre" href="<?=$item['eflore_url']?>"
onclick="window.open(this.href);return false;"
title="Klik hier om toegang te krijgen tot de eFlore fiche">
<?=$item['infos']['nom_sci']?>
</a> door
<a class="cel-img-contact"
href="?mode=contact&nn=<?= urlencode($item['infos']['nn']) ;?>&nom_sci=<?= urlencode($item['infos']['nom_sci']) ;?>&date=<?= urlencode($item['infos']['date']) ;?>&id_image=<?= $item['guid']; ?>&lang=nl"
title="Klik hier om contact op te nemen met de auteur van de foto">
<?=$item['infos']['auteur']?>
</a>
te <?= $item['infos']['localite'] ?>
op <?=$item['infos']['date']?>
<?php } else { ?>
<?=$item['titre']?>
<?php } ?>
</strong><br />
<span class="cel-img-date">Gepubliceerd op <?=$item['date']?></span>
</div>
</div>
<?php endforeach; ?>
<?php if ($extra_actif) : ?>
<div id="cel-photo-extra<?=$id?>" class="cel-photo-extra cel-photo">
<a href="<?=sprintf($extra['url_tpl'], 'XL')?>" class="cel-img" title="<?=$extra['titre']?> - Gepubliceerd op <?=$extra['date']?> - GUID : <?=$extra['guid']?>" rel="galerie-princ<?=$id?>">
<img src="<?=sprintf($extra['url_tpl'], 'CRS')?>" alt="<?=$extra['titre']?>"/>
</a>
</div>
</div>
<?php endif ?>
<p class="cel-photo-pieds discretion nettoyage">
<span class="cel-photo-source">
Bron :
<a href="http://www.tela-botanica.org/page:cel" title="Carnet en Ligne" onclick="window.open(this.href);return false;">
CEL
</a>
</span>
<span class="cel-photo-date-generation">Au <?=strftime('%A %d %B %Y te %H:%M:%S')?></span>
</p>
<script type="text/Javascript">
//<![CDATA[
var utiliseFancybox = "<?= $utilise_fancybox; ?>";
if(utiliseFancybox) {
$('a.cel-img').attr('rel', 'galerie-princ<?=$id?>').fancybox({
transitionIn:'elastic',
transitionOut:'elastic',
speedIn :600,
speedOut:200,
overlayShow:true,
titleShow:true,
titlePosition:'inside',
titleFormat:function (titre, currentArray, currentIndex, currentOpts) {
var motif = /GUID : ([0-9]+)$/;
motif.exec(titre);
var guid = RegExp.$1;
var info = $('#cel-info-'+guid).clone().html();
var tpl =
'<div class="cel-legende">'+
'<p class="cel-legende-vei">'+'Beeld nr.' + (currentIndex + 1) + ' op ' + currentArray.length +'<\/p>'+
(titre && titre.length ? '<p>'+info+'<\/p>' : '' )+
'<\/div>';
return tpl;
}
});
} else {
$('a.cel-img').click(function(event) {
ouvrirFenetrePopup($(this));
event.preventDefault();
});
}
$(document).ready(function() {
$('a.cel-img-contact').live('click', function(event) {
event.preventDefault();
ouvrirFenetreContact($(this));
});
});
function ouvrirFenetrePopup(lienImage) {
var url = "?mode=popup&url_image="+lienImage.attr('href')+'&galerie_id=<?= $galerie_id ?>';
window.open(url, '', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no, width='+(700)+', height='+(650));
}
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));
}
//]]>
</script>
<?php endif; ?>
</div>
<!-- WIDGET:CEL:PHOTO - FIN -->
</body>
</html>
/branches/v3.01-serpe/widget/modules/photo/squelettes/popup.tpl.html
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> '+
' par <a class="lien_contact" href="'+lienContact+'">'+infos.auteur+'</a> '+
' le '+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(' par ');
var nn = '[nn'+tab_titre_suite[0];
var tab_titre_fin = tab_titre_suite[1].split(' le ');
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="cliquez ici ou utilisez la flèche gauche pour afficher l'image précédente">
<img style="border:none" src="https://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="https://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>
/branches/v3.01-serpe/widget/modules/photo/squelettes/contact_nl.tpl.html
New file
0,0 → 1,131
<!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>Neem contact op met de auteur van de afbeelding</title>
<link rel="stylesheet" type="text/css" href="<?=$url_css?>contact.css" media="screen" />
<script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/1.6.2/jquery-1.6.2.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap.css">
<script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/validate/1.8.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/validate/1.8.1/messages_fr.js"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
var donnees = new Array();
function envoyerCourriel() {
//console.log('Formulaire soumis');
if ($("#form-contact").valid()) {
var destinataireId = $("#fc_destinataire_id").attr('value');
var typeEnvoi = $("#fc_type_envoi").attr('value');
// l'envoi aux non inscrits passe par le service intermédiaire du cel
// qui va récupérer le courriel associé à l'image indiquée
var urlMessage = "https://www.tela-botanica.org/service:cel:celMessage/image/"+destinataireId;
var erreurMsg = "";
console.log($(this));
$.each($("#form-contact").serializeArray(), function (index, champ) {
var cle = champ.name;
cle = cle.replace(/^fc_/, '');
if (cle == 'sujet') {
champ.value += " - Carnet en ligne - Tela Botanica";
}
if (cle == 'message') {
champ.value += "\n--\n"+
"Dit bericht wordt u toegestuurd via de fotowidget van de ‘Carnet en Ligne’ van het Tela Botanica netwerk.\n"+
"http://www.tela-botanica.org/widget:cel:photo";
}
donnees[index] = {'name':cle,'value':champ.value};
});
$.ajax({
type : "POST",
cache : false,
url : urlMessage,
data : donnees,
beforeSend : function() {
$(".msg").remove();
},
success : function(data) {
$("#fc-zone-dialogue").append('<pre class="msg info">'+data.message+'</pre>');
},
error : function(jqXHR, textStatus, errorThrown) {
erreurMsg += "Erreur Ajax :\ntype : "+textStatus+' '+errorThrown+"\n";
reponse = jQuery.parseJSON(jqXHR.responseText);
if (reponse != null) {
$.each(reponse, function (cle, valeur) {
erreurMsg += valeur + "\n";
});
}
},
complete : function(jqXHR, textStatus) {
var debugMsg = '';
if (jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
if (debugInfos != null) {
$.each(debugInfos, function (cle, valeur) {
debugMsg += valeur + "\n";
});
}
}
if (erreurMsg != '') {
$("#fc-zone-dialogue").append('<p class="msg">'+
'Er is een fout opgetreden bij het versturen van uw bericht.'+'<br />'+
'U kunt de storing melden bij <a href="'+
'mailto:cel@tela-botanica.org'+'?'+
'subject=Disfonctionnement du widget carto'+
"&body="+erreurMsg+"\nDébogage :\n"+debugMsg+
'">cel@tela-botanica.org</a>.'+
'</p>');
}
}
});
}
return false;
}
function initialiserFormulaireContact() {
$("#form-contact").validate({
rules: {
fc_sujet : "required",
fc_message : "required",
fc_utilisateur_courriel : {
required : true,
email : true}
}
});
$("#form-contact").live("submit", function(event) {
event.preventDefault();
envoyerCourriel();
});
$("#fc_annuler").live("click", function() {window.close();});
}
$(document).ready(function() {
initialiserFormulaireContact();
});
//]]>
</script>
<!-- Squelette du formulaire de contact -->
<div id="tpl-form-contact">
<form id="form-contact" method="post" action="">
<div id="fc-zone-dialogue"></div>
<div>
<div><label for="fc_sujet">Onderwerp</label></div>
<div><input id="fc_sujet" name="fc_sujet" value="<?= $donnees['sujet'] ?>"/></div>
<div><label for="fc_message">Bericht</label></div>
<div><textarea id="fc_message" name="fc_message"><?= $donnees['message'] ?></textarea></div>
<div><label for="fc_utilisateur_courriel" title="Gebruik het e-mailadres waarmee u bent aangemeld bij Tela Botanica">Jouw e-mailadres</label></div>
<div><input id="fc_utilisateur_courriel" name="fc_utilisateur_courriel"/></div>
</div>
<p>
<input id="fc_destinataire_id" name="fc_destinataire_id" type="hidden" value="<?= $donnees['id_image'] ?>" />
<input type="hidden" name="fc_type_envoi" id="fc_type_envoi" value="non-inscrit" />
<input id="fc_annuler" type="button" value="Annuleren">
<input id="fc_effacer" type="reset" value="Wissen">
<input id="fc_envoyer" type="submit" value="Verzenden" />
</form>
</div>
</body>
</html>
/branches/v3.01-serpe/widget/modules/photo/squelettes/css/photo.css
New file
0,0 → 1,112
@charset "UTF-8";
/*+-----------------------------------------------------------------------------------------------------------------+*/
/* Widget */
.cel-photo-contenu{
position:relative;
padding:0 5px;
margin:5px auto;
font-family:Arial,verdana,sans-serif;
background-color:#DDDDDD;
color:black;
}
.cel-photo-contenu h1 {
margin:5px !important;
padding:0 !important;
font-size:16px !important;
color:black !important;
background-color:transparent !important;
background-image:none !important;
text-transform:none !important;
text-align:left !important;
}
.cel-photo-contenu h1 a{
color: #AAAAAA !important
}
.cel-photo-contenu h1 a:hover {
color:#56B80E !important;
border-bottom:1px dotted #56B80E;
}
.cel-photo-contenu h1 .cel-photo-flux{
width:16px;
height:20px;
}
.cel-photo-contenu img {
border:0 !important;
padding:0 !important;
margin:0 !important;
}
.cel-photo-contenu a, .cel-photo-contenu a:active, .cel-photo-contenu a:visited {
border-bottom:1px dotted #666;
color: black;
text-decoration:none;
background-image:none;
}
.cel-photo-contenu a:active {
outline:none;
}
.cel-photo-contenu a:focus {
outline:thin dotted;
}
.cel-photo-contenu a:hover {
color:#56B80E;
border-bottom:1px dotted #56B80E;
}
.cel-photo-date-generation{
float:right;
font-size:8px;
}
/*+-----------------------------------------------------------------------------------------------------------------+*/
/* Général */
.cel-photo-contenu .discretion {
color:grey;
font-family:arial;
font-size:11px;
font-weight:bold;
}
.cel-photo-contenu .nettoyage {
clear:both;
}
/*+-----------------------------------------------------------------------------------------------------------------+*/
/* Galerie Photos CEL */
.cel-photo-contenu .cel-photo a{
float:left;
padding:2px;
border:1px solid white;
}
.cel-photo-contenu .cel-photo a:hover{
border:1px dotted #FD8C13;
}
.cel-photo-contenu .cel-photo a img{
float:left;
width:63px;
height:63px;
}
.cel-photo-contenu .cel-photo-extra a img{
height:auto;
}
.cel-photo-contenu .cel-infos {
display:none;
}
/*+-----------------------------------------------------------------------------------------------------------------+*/
/* Diaporama */
.cel-legende{
text-align:left;
}
.cel-legende-vei{
float:right;
}
.cel-legende p{
color:black;
font-size:12px;
margin:5px 0;
}
.cel-legende a, .cel-legende a:active, .cel-legende a:visited {
border-bottom:1px dotted gainsboro;
color:#333;
text-decoration:none;
background-image:none;
}
.cel-legende a:hover {
color:#56B80E;
border-bottom:1px dotted #56B80E;
}
/branches/v3.01-serpe/widget/modules/photo/squelettes/css/contact.css
New file
0,0 → 1,17
#tpl-form-contact {
width: 350px;
padding: 15px;
}
 
input, textarea {
max-width: 100%;
width: 100% !important;
}
 
textarea {
height: 185px !important;
}
 
.error {
color: red;
}
/branches/v3.01-serpe/widget/modules/photo/squelettes/css/popup.css
New file
0,0 → 1,85
@CHARSET "UTF-8";
 
body {
color: black !important;
font-size: 16px !important;
font-weight: bold;
font-family: Arial,verdana,sans-serif;
}
 
hr.nettoyage {
visibility:hidden;
}
 
/*----------------------------------------------------------------------------------------------------------*/
/* Disposition */
#zone-pied {
text-align:center;
}
#eflore_pied_page {
text-align:center;
}
#zone-debug {
background-color:grey;
color:white;
}
 
/*----------------------------------------------------------------------------------------------------------*/
/* Spécifiques popup : ILLUSTRATION */
#info-img .img-cadre {
text-align:center;
}
#info-img img {
display:inline;
vertical-align:middle;
margin:0;
border:0;
border: 1px solid lightgrey;
padding:2px;
}
 
/*----------------------------------------------------------------------------------------------------------*/
/* Spécifiques popup : GALERIE */
#info-img-galerie .conteneur-precedent {
float:left;
width:50px;
position: absolute;
top: 50%;
}
 
#info-img-galerie .conteneur-suivant {
position: absolute;
top: 50%;
right:10px;
width:50px;
float:right;
}
 
#info-img-galerie .conteneur-precedent #precedent, #info-img-galerie .conteneur-suivant #suivant {
position:relative;
top:50%;
font-size:1.3em;
border:none;
}
 
#info-img-galerie .conteneur-suivant #suivant {
float:right;
text-align:right;
}
 
#info-img-galerie .img-cadre {
float:left;
left: 60px;
position: absolute;
height:100%;
}
 
#info-img-galerie #lien-voir-meta {
text-align: center;
}
 
#bloc-infos-img {
position: absolute;
bottom: 10px;
left: 60px;
}