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.
Romain
Oulalala le retour :D
zorrito
On essaye :)
Le plus dur sera de tenir le rythme, mais la je suis en sur régime, ça va se calmer.
Mais cette fois ci je serais obligé de tenir le rythme un minimum.
AlexKid
Bonjour, je voudrais simplement savoir s’il est possible de faire tourner le mooflow de manière automatiquement, par exemple on passe d’une image à l’autre après 5 secondes d’attente.
Que faudrait-il modifier dans le code pour obtenir cela?
Merci de votre aide
Cordialement
zorrito
La librairie ne le permet pas.
Désolé.
AlexKid
Bonjour, j’aurais une question à poser concernant le mooflow.
Est-il possible de mettre en pause le mooflow lors du passage de la souris sur le mooflow? Si c’est le cas pouvez-vous me m’aider dans cette démarche…
Merci beaucoup
zorrito
Rien est prévu pour cela, il faudrait reprendre le script ce que je ne peux me permettre.
Désolé
python
bonjour merci pour ce petit tuto c’est très sympa.
je voulais vous demander s’il était possible de faire un lien sur une image.
J’ai fait un test avec :
un lien vers google sur la première image : rien ne se passe. Une explication? une solution?
Merci
python
quelqu’un pour répondre à ma question?
wofty
Bonjour, je cherche en vain comment mettre un lien html sur chaque image. Merci de m’éclairer.
zorrito
On peux trouver un exemple ici mais c’est pas tout à fait un clic sur les images mais presque.
http://www.outcut.de/MooFlow/example-fullsize-viewer.html
drefbond
Bonjour,
j’ai essayé de refaire l’exemple du lien ci-dessus, mais je n’arrive pas à mettre les liens vers une page html. En fait, j’ai que les images et le slider, et quand je clique sur les images, rien ne se passe.
Si vous pouviez m’éclairer
zorrito
On peux trouver un exemple ici mais c’est pas tout à fait un clic sur les images mais presque.
http://www.outcut.de/MooFlow/example-fullsize-viewer.html