Créer un carroussel de photos avec mooFlow

Ce carroussel s'inspire fortement de ImageFlow, mais son design est plus évolué.

Voir le carroussel Mooflow.

Première étape :

Allez sur Mooflow

Cliquez sur Download MooFlowV0.2dev.zip

Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour le décompresser, j'utilise WinRAR, Extraire Vers

Deuxième étape :

Dans l'administration de votre blog - Documents - Autres Fichiers :

• créez un répertoire Mooflow
• dans lequel vous créez un sous-répertoire skin
• dans lequel vous enregistrez les fichiers suivants :
• ajax_loader.gif
• left-slider.gif
• left.gif
• loader.gif
• middle-slider.gif
• middle.gif
• open_image.png
• open_link.png
• play.gif
• resize.gif
• right.gif
• stop.gif
• tooltip.png

notez les adresses de ces images

Troisième étape :

Sur votre PC :

• ouvrez le bloc-notes
• appelez le fichier MooFlow.css
• modifiez les adresses des images (vous les avez noté à la deuxième étape)

enregistrez sous le même nom

Quatrième étape :

Dans votre administration - Documents - Autres Fichiers - mooflow:

• créez un répertoire css
• dans lequel vous enregistrez le fichier : mooFlow.css

notez son adresse

• créez un répertoire js
• dans lequel vous enregistrez les fichiers :
• MooFlow.js
• mootools-beta-1.2b2.js

notez leur adresse
Cinquième étape :

Lors de la création de votre caroussel, en HTML, vous copiez/collez

<link rel="stylesheet" type="text/css" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/css/MooFlow.css" />
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/js/mootools-beta-1.2b2.js"></script>
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/js/MooFlow.js"></script>

Vous remplacez les adresses en rouge par les vôtres. Vous les avez noté lors de la quatrième étape. Si vous êtes sur Over-Blog, vous pouvez utiliser les miennes

Toujours en HTML, collez tel quel

<script type="text/javascript">
var myMooFlowPage = {
start: function(){
/* MooFlow instance with the complete UI */
var mf = new MooFlow($('MooFlow'), {
stylePath: 'MooFlow.css',
useSlider: true,
useAutoPlay: true,
useCaption: true,
useResize: true,
useWindowResize: true,
useMouseWheel: true,
useKeyInput: true,
startIndex: 4
});
}
};
window.addEvent('domready', myMooFlowPage.start);
</script>

et enfin, le carroussel en lui-même

<div id="content">
<div id="MooFlow">
<div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/at_symbol.jpg" title="@2" alt="Ein @-Symbol" /></div>
<div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/stimme_von_oben.jpg" title="Stimme von oben" alt="Lautsprecherturm"/></div>
<div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/farbraum.jpg" title="Farbraum Farbfächer" alt="A deginer must have." /></div>
<div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/tropfen.jpg" title="Lichtfluß" alt="Tropfen" /></div>
<div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/kunst.jpg" title="Tja, `s is scho arg verändert..." alt="...aber ratet mal was das is.." /></div>
<div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/platsch.jpg" title="Platsch" alt="Platsch - Der Wassertropfen" /></div>
<div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/raetsel_1.jpg" title="Rätsel" alt="Micro" /></div>
<div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/raetsel_2.jpg" title="Was ist das?" alt="Rutsche?" /></div>
<div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/datenscheiben.jpg"
title="Datenscheiben" alt="CD-Sammlung" /></div>
<div><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mooflow/images/fries.jpg" title="Fries" alt="Mandelbrot?" /></div>
</div>
</div>

En bleu, les adresses de vos images
En vert, les descriptions de ces images