Coverflow mootools – MooFlow

Par zorrito le 22 avril 2009 à 9:00 :: codage

MooFlow (compatible avec mootools 1.2) vous permettra de réaliser de jolie coverflow.

Pré-requis

Après avoir inclus tout les fichiers nécessaires au bon fonctionnement de ce coverflow (vous pouvez voir cela en téléchargeant les sources en bas de cet article), il devient très facile de réaliser votre effet.

Inclusion javascript pour les définir les options du coverflow

Vous trouverez la documentation ici même.

<script type="text/javascript">
var myMooFlowPage = {	

	start: function(){

		var mf = new MooFlow($('MooFlow'), {
			bgColor: '#fff',
			useSlider: true,
			useAutoPlay: true,
			useCaption: true,
			useResize: true,
			useWindowResize: true,
			useMouseWheel: true,
			useKeyInput: true
		});
	}
};
window.addEvent('domready', myMooFlowPage.start);
</script>

Création du coverflow

Le petit bout de code ci-dessous permet ensuite de créer le coverflow.

<div id="MooFlow">
<div><img src="images/cover1.jpg" title="zorrito1" alt="zorrito1" /></div>
<div><img src="images/cover2.jpg" title="zorrito2" alt="zorrito2" /></div>
<div><img src="images/cover3.jpg" title="zorrito3" alt="zorrito3" /></div>
<div><img src="images/cover4.jpg" title="zorrito4" alt="zorrito4" /></div>
</div>

Démos

Vous pouvez télécharger les fichiers d’example et voir une démo.

Vous trouverez d’autres démonstrations directement sur le site de MooFlow.

Articles similaires

• Coverflow Ajax
• Panneau déroulant jquery
• Cookie jquery pour style switcher
• Création d’un panier en PHP
• Création simplifiée htaccess