Affichage des articles dont le libellé est carroussel. Afficher tous les articles
Affichage des articles dont le libellé est carroussel. Afficher tous les articles

25 juil. 2010

Créer un carroussel de photos avec mootools

Publié par Libellés : , , , ,
Le rythme de ce carroussel change au survol de la souris, comme vous pourrez le constater après avoir cliqué sur ce lien : Le carroussel Mootools

Première étape :

Allez chez AndrewSellick

Cliquez sur Feel free to download the Simple 3D Carousel.

Vous venez d'enregistrer un fichier .zip. C'est un ensemble de fichiers compressés.

Pour décompresser ces fichiers, j'utilise Win RAR, Extraire vers

Deuxième étape :


Dans l'administration de votre blog - Documents - Mes fichiers :
  • vous créez un répertoire Carroussel
  • dans ce répertoire, vous enregistrez les fichiers : 3dcarroussel.js et mootools.js
vous notez leur adresse

Troisième étape :

En HTML, vous collez
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/carroussel/mootools.js" type="text/javascript"></script>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/carroussel/3dcarousel.js" type="text/javascript"></script>

Si votre blog est sur Over-Blog, vous pouvez utiliser mes propres adresses de fichiers.

Vous collez ensuite
<style>
#carousel{background-color:#000000;width:700px;height:400px;position:relative;border:1px solid #FFFFFF;}
img{ width:100%;height:auto;border:0px solid #FFFFFF;display:block;}
</style>
Vous pouvez personnaliser le background, les dimensions, les bordures.

Et pour finir, vous collez
<body>
<div id="carousel"> <div>
<a href="#"><img src="images/dreamweaver.png" /></a></div> <div>
<a href="#"><img src="images/director.png" /></a></div> <div>
<a href="#"><img src="images/flash.png" /></a></div> <div>
<a href="#"><img src="images/freehand.png" /></a></div> <div>
<a href="#"><img src="images/swf-player.png" /></a></div> <div>
<a href="#"><img src="images/coldfusion.png" /></a></div> </div>
</body>

Avec l'adresse de vos propres images (en rouge)
7 commentaires:

Créer un carroussel de photos avec mooFlow

Publié par Libellés : , , , ,
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:

Créer un carroussel de photos avec imageFlow

Publié par Libellés : , , , ,
Cliquez sur ce lien, bouger le curseur et le carroussel défile : Voir le caroussel
Joli, non ? Voici comment le réaliser.

1ère étape :

Allez sur DragonFly

Cliquez sur Download ImageFlowImageFlow_0.9.rar (22 kB)

Il s'agit d'un fichier .zip : un ensemble de fichiers compressés. Pour le décompresser, j'utilise WinRAR - Extraire Vers.

2ème étape :

Dans l'administration de votre blog - Documents - Autres Fichiers :
  • vous créez un répertoire : imageflow
  • dans lequel vous enregistrez les fichiers : slider.png et loading.gif
  • vous notez l'adresse de ces images
3ème étape :

Sur votre PC :
  • vous ouvrez le bloc-notes
  • vous appelez le fichier screen.css
  • vous modifiez l'adresse de l'image slider.png (vous l'avez noté à la 2ème étape)
vous enregistrez sous le même nom

4ème étape :

Dans l'administration de votre blog - Documents - Autres Fichiers - Imageflow :
  • vous enregistrez les fichiers : screen.css et imageflow.js
Le langage php n'étant pas utilisable sur Over-Blog, je ne tiens pas compte du fichier reflect.php. Il n'y a donc pas d'effet de reflet sur les images.

5ème étape :

Lors de la création de votre carroussel, vous copiez/collez en HTML
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imageFlow/screen.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imageFlow/imageflow.js"></script>
En rouge, vous remplacez par vos propres adresses de fichiers. Si vous êtes sur Over-Blog, vous pouvez utiliser les miennes.

Ensuite, on place le carroussel, en collant à la suite en HTML :
<div id="imageflow">
<div id="loading">
<b>Loading images</b><br/>
<img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imageFlow/loading.gif" width="208" height="13" alt="loading" />
</div>
<div id="images">
<img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" longdesc="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="Image_1" />
<img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" longdesc="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="Image_2" />
<img src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" longdesc="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="Image_3" />
<img src="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" longdesc="http://idata.over-blog.com/0/37/17/67/photos/photo002bis.jpg" alt="Image_4" />
<img src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" longdesc="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" alt="Image_5" />
<img src="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" longdesc="http://idata.over-blog.com/0/37/17/67/photos/photo004bis.jpg" alt="Image_6" />
</div>
<div id="captions"></div>
<div id="scrollbar">
<div id="slider"></div>
</div>
</div>
En vert : l'adresse de loading.gif que vous avez noté lors de la 2ème étape
En bleu : les adresses de vos images. Vous constatez qu'elles vont toujours par pair
En orange : le titre de l'image qui apparaîtra dessous.
1 commentaire:
Inscription à : Articles (Atom)