Guggstu
Startseite - Programmieren - MooTools MooFlow
MooTools MooFlow

MooTools MooFlow

MooTools ist ja das andere bekannte Framework für Ajax Effekte. Auch hier gibt es viele tausende von coolen Plugins und hier stelle ich euch MooFlow vor. Es ist ähnlich wie das, welches ich letzte Woche vorgestellt habe mit dem Name jQuery Image Flow.

MooTools MooFlow

Auch das MooFlow Plugin ist sehr einfach einzubauen. Das Spezielle an diesem Script ist, dass man es unterschiedlich Konfigurieren kann für unterschiedliche Einsatzmöglichkeiten. Aber wie immer bei diesen Plugins – der Einbau kann jeder machen und das Endergebnis sieht genial aus.

Man Downloaded die entsprechende Scripte hier und fügt sie dann im Metabereich ein:

1
2
3
4
<link rel="stylesheet" type="text/css" href="MooFlow.css" />
<script type="text/javascript" src="../js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="../js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="MooFlow.js"></script>

Danach aktiviert man es indem man ein JavaScript einfügt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.addEvent('domready', function(){
 
	var mf = new MooFlow($('MooFlow'), {
		startIndex: 5,
		useSlider: true,
		useAutoPlay: true,
		useCaption: true,
		useResize: true,
		useWindowResize: true,
		useMouseWheel: true,
		useKeyInput: true
	});
 
});

Und dann zum Schluss fügt man noch die Bilder hinzu – dort wo man es will und welche Bilder auch immer gewünscht sind.

1
2
3
4
5
6
7
8
9
10
11
12
  <div id="MooFlow">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

Und dann ist der ganze Einbau abgeschlossen und das Script funktioniert.

Ich wünsche euch viel Spass beim rumexperimentieren.

Über Eric-Oliver Mächler

Hallo, ich bin Eric-Oliver Mächler - Social Media Guru, ChefBlogger und Freigeist. Ich bin alles nur nicht langweilig und immer auf Achse um neues zu Entdeckten und Erforschen im Offline wie auch in der Online Welt.

Kommentar verfassen

Nach oben scrollen