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
self-made
bonjour et merci tout d’abord. et aussi une grand merci pour le Temps consacré pour m’aider.
le tuto coverflow Je n’arrive pas a l’installer.
les script je les colle ou et pour installer le coverflow .
j’ais besoin de quoi? aussi mootools 1.2 comment l’installer
je suis débutant.merci?
ou je dois coller le script 1 et 2
pour installer le coverflow j’ais besoin que des 2 script ?
si possible une tuto en img ou en vdeo svp et merci.
script 1
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
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 2
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
Nico
Merci pour ce tuto super chouette !
J’ai pu le manier à ma façon le charger sur serveur et sur le net tout roule.
PAr contre je galère, j’aimerais pouvoir le consulter en local sur mon site en me passant de l’accès WEB
Mais je n’arrive pas à réécrire le script pour passer uniquement en local est ce possible ?
Mon site est sur clé usb tout marche nickel en local sauf ce Mooflow j’aimerais vraiment pouvoir le lire en local merci beaucoup !
ghezzzz
ou télécharger ce programme??mooflow
zorrito
Ici http://www.outcut.de/MooFlow ou la http://www.zorrito.com/code/mooflow/mooflow.rar
Theo
Hello,
J’ai plusieurs questions à te soumettre : Je récupère un site programmé par quelqu’un d’autre et je connais pas bien mooflow, apparemment il est couplé avec Virtuemart sur joomla et il semblerait que je ne peux afficher que 13 articles dans le slide.
Y a t’il une limitation du nombre d’image dans mooflow ? si oui quel fichier java ou autre je dois modifier pour augmenter le nombre?
merci
Théo
zorrito
De base je ne vois aucune contrainte quand au nombre d’images à mettre dans le slideshow (sauf pour l’esthétisme peux être), donc il n’y a aucun js à modifier pour changer cette limitation car elle n’existe pas.
Mika
Bonjour, je voulais savoir s’il etait possible d’utiliser mooflow avec des videos youtube, plutot que des images.
Merci d’avance ;)
Nando
bonjour je voudrais enlever l’encadrement noir du tour pour la reste c’est bon,merci
zorrito
Dans le fichier MooFlowWhite.css (me semble t’il) il faut enlever ceci.
.mf {
border:medium double;
color:#555555;
font-size:14px;
}
Nando
une autre question a poser le dossier style faut le mettre a la racine du site ou alors faut l’ouvrir et mettre MooFlowWhite.css dans le dossier css de mon site et le dossier white-skin aussi a la racine?parce que la plus rien fonctionne,merci
Nando
voila problème résolue tous est impécable sauf que les images reste fixe est ce normale?
zorrito
Il faut appuyer sur le bouton qui ressemble à lecture pour que ca bouge tout seul, après pour que ca bouge tout seul dès le début essaye d’aller voir sur le site officiel.
Nando
voici ce que sa donne http://www.mondialprezz.com/index.php?page=acceuil quel réglages pour centrer les images entre le haut et le bas?
zorrito
Je ne sais plus exactement comment est calculé la taille, essaye de regarder ici http://www.outcut.de/MooFlow/Documentation.html et modifie le « heightRatio »