25 juil. 2010

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

Aucun commentaire:

Enregistrer un commentaire

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)