RokSlideshow est un slideshow sous Mootools, permettant de présenter ses photos sous forme de carousel ou de mettre en avant des articles sur sa page d'accueil, à la manière des sites d'actualité.

Caractéristiques

• Compatible Mootools 1.1
• 6 effets de transition personnalisable.
• Prise en charge des liens sur les photos.
• Mode d'affichage par ordre alphabétique, date de création, aléatoire ou manuel.
• Possibilité d'afficher un titre et une description pour chaque photo.
• Prise en charge de l'internationalisation via JoomFish.

Utilisation

La partie html est réduite au stricte minimum :

<div class="wrapper">
		<div id="slidewrap">
			
			
		</div>
		<div class="clr">
	 </div>
</div>

Le plus gros de la configuration se fait dans le Javascript.
On commence par déclarer un tableau qui contient les informations sur les photos, puis la configuration du script, à proprement parler :

			window.RokSlideshowPath = '';

			var myshow;
			window.addEvent('load', function(){
				var imgs = [];

				imgs.push({
					file: 'site.jpg',
					title: 'La Ferme du Web',
					desc: 'La description de site',
					url: 'http://www.lafermeduweb.net'
				});
				imgs.push({
					file: 'forum.jpg',
					title: 'Les Forums',
					desc: 'La description des forums',
					url: 'http://forum.lafermeduweb.net'
				});
				imgs.push({
					file: 'rss.jpg',
					title: 'Suivez l'actualité du site via rss',
					url: 'http://feeds.lafermeduweb.net/LaFermeDuWeb'
				});

				myshow = new Slideshow('slideshow', { 
					type: 'combo',
					showTitleCaption: 1,
					captionHeight: 45,
					width: 450, 
					height: 300, 
					pan: 20,
					zoom: 30,
					loadingDiv: 1,
					resize: true,
					duration: [2000, 9000],
					transition: Fx.Transitions.Expo.easeOut,
					images: imgs, 
					path: 'images/'
				});

				myshow.caps.h2.setStyles({
					color: '#fff',
					fontSize: '13px'
				});
				myshow.caps.p.setStyles({
					color: '#ccc',
					fontSize: '11px'
				});
			});

Puis, au tour du CSS pour la mise en forme:

.clr {
	clear: both;
}
.wrapper {
	width: 470px;
	margin: 0 auto;
}
a {
	text-decoration: none;
	color: #0985B4;
}
h2 {
	color: #D0491C;
	font-family: Geneva,Helvetica,Arial,sans-serif;
	font-size: 160%;
	font-weight: normal;
	margin: 0pt 0pt 15px;
}
#slidewrap {
	border: 5px solid #EEEEEE;
	margin: 0;
	padding: 5px;
}
#slidewrap div { text-align: center; }
#footer {
	border-top: 2px solid #eee;
	margin-top: 2em;
	font-weight: bold;
	padding: 0.5em;
	text-align: right;
	color: #999;
}

Pour l'installation des modules Joomla, réferrez-vous à la doc d'installation.

Documentation et téléchargement, sur le site officiel.