Bonjour,
j'ai commencer une contrib, mais pas le temps de finir...
Je l'ai testé en portofolio.
voici dans le head :
++++
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Aeron Glemann (http://www.electricprism.com/aeron/)" />
<link rel="stylesheet" type="text/css" href="squelettes/slideshow/css/slideshow.css" media="screen" />
<script type="text/javascript" src="squelettes/slideshow/js/mootools.js"></script>
<script type="text/javascript" src="squelettes/slideshow/js/slideshow.js"></script>
<script type="text/javascript" src="squelettes/slideshow/js/slideshow.flash.js"></script>
<script type="text/javascript" src="squelettes/slideshow/js/slideshow.fold.js"></script>
<script type="text/javascript" src="squelettes/slideshow/js/slideshow.kenburns.js"></script>
<script type="text/javascript" src="squelettes/slideshow/js/slideshow.push.js"></script>
<script type="text/javascript" src="squelettes/slideshow/js/slideshow.js"></script>
<script type="text/javascript" src="squelettes/slideshow/js/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="squelettes/slideshow/css/lightbox.css" media="screen" />
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
<BOUCLE_afficher_document(DOCUMENTS){id_article} {mode=document}{extension IN png,jpg,gif} {par titre, date}>
'[(#FICHIER)]': { caption: '[(#TITRE|sinon{David Lipzyc})]',thumbnail:'[(#MODELE{emb}|image_reduire{70,70}||extraire_attribut{src})]'},
</BOUCLE_afficher_document>};
// Note the use of "linked: true" which tells Slideshow to auto-link all slides to the full-size image.
var myShow = new Slideshow('show', data, { captions: true, controller: true, delay: 3000, height: 500,thumbnails: true, hu: '[(#URL_DOCUMENT)]', linked: true, width: 500 });
// Here we create the Lightbox instance.
// In this case we will use the "close" and "open" callbacks to pause our show while the modal window is visible.
var box = new Lightbox({
'onClose': function(){ this.pause(false); }.bind(myShow),
'onOpen': function(){ this.pause(true); }.bind(myShow)
});
});
//]]>
</script>
<style type="text/css">
/* slideshow styles*/
#visuel a { color: #404040; }
#visuel a:hover { text-decoration: none; }
#visuel code { color: #404040; font: normal 10px Monaco, monospace; }
#visuel em { color: #808080; font-style: normal; }
#visuel h1 { color: #000; font: normal 12px/16px Arial, sans-serif; padding: 0 20px 16px; text-transform: lowercase; }
#visuel h1:before { content: '.'; }
#visuel p { color: #404040; font: normal 12px/16px Arial, sans-serif; padding: 0 20px 16px; }
/* Overriding the default Slideshow thumbnails for the vertical presentation */
.slideshow-thumbnails {
height: 500px;
left: auto;
right: -90px;
top: 0;
width: 80px;
}
.slideshow-thumbnails ul {
height: 500px;
width: 80px;
}
</style>
+++
Dans la page :
<BOUCLE_documents_portfolio(DOCUMENTS){id_article} {mode=document}{extension IN png,jpg,gif} {par titre, date}{0,1}>
<div id="show" class="slideshow">
<div class="slideshow-images">
<a rel="lightbox" class="fancybox"><img src="[(#FICHIER|image_reduire{500,0})]" alt="[(#TITRE|attribut_html)]" /></a>
</div>
<div class="slideshow-captions"></div>
<div class="slideshow-controller">
<ul>
<li class="first"><a></a></li>
<li class="prev"><a></a></li>
<li class="pause play"><a></a></li>
<li class="next"><a></a></li>
<li class="last"><a></a></li>
</ul>
</div>
<div class="slideshow-thumbnails">
<ul>
<li><a class="slideshow-thumbnails-active"><img src="[(#MODELE{emb}|image_reduire{70,70}||extraire_attribut{src})]" /></a></li>
<li><a class="slideshow-thumbnails-inactive"><img src="[(#MODELE{emb}|image_reduire{70,70}||extraire_attribut{src})]" </a></li>
<li><a class="slideshow-thumbnails-inactive"><img src="[(#MODELE{emb}|image_reduire{70,70}||extraire_attribut{src})]" </a></li>
...
</ul>
</div>
</div>
</BOUCLE_documents_portfolio>
</div>
</B_documents_portfolio>
Amusez-vous bien !