Coverflow mootools – MooFlow

Coverflow mootools – MooFlow

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

Auteur : zorrito

Son site web | Articles de zorrito

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.

Vous aimez ce billet? Partagez le!

  • Tweet
  • Facebook
  • Diggit
  • Delicious
  • Diggit
  • Diggit
  • Diggit

partenaire

Billet(s) sur le même sujet


Commentaires


  1. Romain
    22 avril 2009

    Oulalala le retour :D

    Répondre


    • zorrito
      22 avril 2009

      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.

      Répondre


  2. AlexKid
    3 septembre 2009

    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

    Répondre


    • zorrito
      3 septembre 2009

      La librairie ne le permet pas.

      Désolé.

      Répondre


  3. AlexKid
    19 octobre 2009

    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

    Répondre


    • zorrito
      19 octobre 2009

      Rien est prévu pour cela, il faudrait reprendre le script ce que je ne peux me permettre.

      Désolé

      Répondre


  4. python
    23 octobre 2009

    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

    Répondre


    • python
      23 octobre 2009

      quelqu’un pour répondre à ma question?

      Répondre


  5. wofty
    30 octobre 2009

    Bonjour, je cherche en vain comment mettre un lien html sur chaque image. Merci de m’éclairer.

    Répondre


  6. zorrito
    31 octobre 2009

    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

    Répondre


  7. drefbond
    3 décembre 2009

    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

    Répondre

Laisser un commentaire

Rss Feeds   Twitter Followers Email Updates

Mes réalisations




Liens de la communauté

Il n'y a pas encore eu de soumission de lien, soyez le premier.


Soumettre Plus