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.

Related posts:

1. Coverflow Ajax

Cliquer directement ici et afficher la source pour pouvoir apprendre à réaliser ce coverflow.
Ou alors télécharger les fichiers ici même.

Related posts:

1. Panneau déroulant jquery
2. Coverflow mootools – MooFlow
3. Upload ajax