/trunk/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; |
} |
/trunk/widget/modules/photo/squelettes/photo.tpl.html |
---|
71,12 → 71,8 |
<h1> |
<? if (!empty($titre)) : ?> |
<?=$titre?> |
<? else : ?> |
Dernières images du |
<a href="http://www.tela-botanica.org/appli:cel" title="Carnet en Ligne" onclick="window.open(this.href);return false;"> |
CEL |
</a> |
<? endif; ?> |
<? endif ; ?> |
<? if($icone_rss) : ?> |
<a href="<?=$flux_rss_url?>" |
class="cel-photo-flux" |
title="Suivre les images" |
83,6 → 79,7 |
onclick="window.open(this.href);return false;"> |
<img src="http://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) : ?> |
117,7 → 114,7 |
<p class="cel-photo-pieds discretion nettoyage"> |
<span class="cel-photo-source"> |
Source : |
<a href="http://www.tela-botanica.org/appli:cel" title="Carnet en Ligne" onclick="window.open(this.href);return false;"> |
<a href="http://www.tela-botanica.org/page:cel" title="Carnet en Ligne" onclick="window.open(this.href);return false;"> |
CEL |
</a> |
</span> |
125,27 → 122,40 |
</p> |
<script type="text/Javascript"> |
//<![CDATA[ |
$('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; |
} |
}); |
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(); |
}); |
} |
function ouvrirFenetrePopup(lienImage) { |
var url = "?mode=popup&url_image="+lienImage.attr('href'); |
window.open(url, '', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no, width='+(700)+', height='+(650)); |
} |
//]]> |
</script> |
<?php endif; ?> |
/trunk/widget/modules/photo/squelettes/photo_ajax.tpl.html |
---|
28,21 → 28,16 |
<?php else : ?> |
<h1> |
<? if (!empty($titre)) : ?> |
<?=$titre?> (<a href="http://www.tela-botanica.org/appli:cel" title="Carnet en Ligne" onclick="window.open(this.href);return false;"> |
CEL |
</a>) |
<? else : ?> |
Dernières images du |
<a href="http://www.tela-botanica.org/appli:cel" title="Carnet en Ligne" onclick="window.open(this.href);return false;"> |
CEL |
</a> |
<? endif; ?> |
<?=$titre?> |
<? endif ; ?> |
<? if($icone_rss) : ?> |
<a href="<?=$flux_rss_url?>" |
class="cel-photo-flux<?=$id?>" |
class="cel-photo-flux" |
title="Suivre les images" |
onclick="window.open(this.href);return false;"> |
<img src="http://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) : ?> |
77,7 → 72,7 |
<p class="cel-photo-pieds discretion nettoyage"> |
<span class="cel-photo-source"> |
Source : |
<a href="http://www.tela-botanica.org/appli:cel" title="Carnet en Ligne" onclick="window.open(this.href);return false;"> |
<a href="http://www.tela-botanica.org/page:cel" title="Carnet en Ligne" onclick="window.open(this.href);return false;"> |
CEL |
</a> |
</span> |
85,31 → 80,42 |
</p> |
<script type="text/Javascript"> |
//<![CDATA[ |
$(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; |
} |
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(); |
}); |
} |
function ouvrirFenetrePopup(lienImage) { |
var url = "?mode=popup&url_image="+lienImage.attr('href'); |
window.open(url, '', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no, width='+(700)+', height='+(650)); |
} |
//]]> |
</script> |
<?php endif; ?> |
/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="<" /> |
</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> |