NoobSlide est un script qui vous permet de faire défiler vos images.
Voir Sample 2
Etape 1 :
Allez sur NoobSlide
Tout en bas de la page, cliquez sur Download
Vous venez d'enregistrez un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers...
Etape 2 :
Dans l'administration de votre blog, Documents - Autres Fichiers :
Sur votre PC :
Dans l'administration de votre blog, Documents - Autres Fichiers - répertoire NoobSlide :
Lors de la conception de ce slideshow, en HTML, collez
Vous modifiez :
En rouge, les adresses de vos fichiers js et css : vous avez noté leur adresse à l'étape 4
En bleu, les adresses de vos propres photos qui défileront
En vert, les titres de votre slideshow
Voir Sample 2
Etape 1 :
Allez sur NoobSlide
Tout en bas de la page, cliquez sur Download
Vous venez d'enregistrez un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers...
Etape 2 :
Dans l'administration de votre blog, Documents - Autres Fichiers :
- créez un répertoire Noobslide
- uploadez-y les fichiers :
- thumb_invisible.gif
- thumbs_mask.gif
- notez leur adresse
Sur votre PC :
- ouvrez le bloc-note
- appelez le fichier style.css
- modifiez-y les adresses des fichiers :
- thumb_invisible.gif
- thumbs_mask.gif
- enregistrez le fichier sous le même nom
Dans l'administration de votre blog, Documents - Autres Fichiers - répertoire NoobSlide :
- enregistrez les fichiers :
- style.css
- _mootools.js
- _class.noobSlide.js
- web.css
- notez leur adresse
Lors de la conception de ce slideshow, en HTML, collez
<head>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_mootools.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_class.noobSlide.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 2 (transition: Bounce.easeOut)
var hs2 = new noobSlide({
box: $('box2'),
items: [1,2,3,4,5,6,7,8],
interval: 3000,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
buttons: {
previous: $('prev1'),
play: $('play1'),
stop: $('stop1'),
next: $('next1')
}
});
//more "previous" and "next" buttons
hs8.addActionButtons('previous',$ES('.prev','box8'));
hs8.addActionButtons('next',$ES('.next','box8'));
//more handle buttons
var handles8_more = $ES('span','handles8_more');
hs8.addHandleButtons(handles8_more);
//
hs8.walk(0)
});
</script>
</head>
<body>
<div id="cont">
<h1>noobSlide - mootools</h1>
<!-- SAMPLE 2 -->
<h2>Sample 2</h2>
<div class="sample">
<div class="mask2">
<div id="box2">
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img1.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img2.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img3.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img4.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img5.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img6.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img7.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img8.jpg" alt="Photo" /></span>
</div>
</div>
<p class="buttons">
<span id="prev1"><< Previous</span>
<span id="play1">Play ></span>
<span id="stop1">Stop</span>
<span id="next1">Next >></span>
</p>
</div>
</div>
</body>
</html>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_mootools.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/_class.noobSlide.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 2 (transition: Bounce.easeOut)
var hs2 = new noobSlide({
box: $('box2'),
items: [1,2,3,4,5,6,7,8],
interval: 3000,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
buttons: {
previous: $('prev1'),
play: $('play1'),
stop: $('stop1'),
next: $('next1')
}
});
//more "previous" and "next" buttons
hs8.addActionButtons('previous',$ES('.prev','box8'));
hs8.addActionButtons('next',$ES('.next','box8'));
//more handle buttons
var handles8_more = $ES('span','handles8_more');
hs8.addHandleButtons(handles8_more);
//
hs8.walk(0)
});
</script>
</head>
<body>
<div id="cont">
<h1>noobSlide - mootools</h1>
<!-- SAMPLE 2 -->
<h2>Sample 2</h2>
<div class="sample">
<div class="mask2">
<div id="box2">
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img1.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img2.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img3.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img4.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img5.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img6.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img7.jpg" alt="Photo" /></span>
<span><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img8.jpg" alt="Photo" /></span>
</div>
</div>
<p class="buttons">
<span id="prev1"><< Previous</span>
<span id="play1">Play ></span>
<span id="stop1">Stop</span>
<span id="next1">Next >></span>
</p>
</div>
</div>
</body>
</html>
Vous modifiez :
En rouge, les adresses de vos fichiers js et css : vous avez noté leur adresse à l'étape 4
En bleu, les adresses de vos propres photos qui défileront
En vert, les titres de votre slideshow
Articles les plus populaires
Publicité
Recherche Rapide Sur le Site
Dernières Astuces
-
Créer une liste de lien défilante qui s'arrête au survol de la souris
2 destinations possibles pour cette astuce : Un menu : en confiance, les possibilités de...
-
Transformer vos photos en dessin au crayon
Allez chez Befunky Cliquez sur Cartoonizer - Get Started Uplaodez votre photo depuis...
-
Privilège - Un outil de statistiques en temps réel
Bubblestat vous propose un outil de statistiques gratuit de mesure d'audience. Son originalité...
-
Un menu horizontal en CSS et HTML
13styles proposent des menus à réaliser en HTML et CSS, tel que celui-ci ...
-
Ecrire en chinois
Après Ecrire en hiéroglyphes, voici écrire en chinois. Allez sur CHINESE NAMES Ecrivez...
-
Transformer vos photos en collages
Allez sur HOCKNEYIZER Uploadez votre photo. Si vous êtes en Confiance, choisissez...
-
Des pistes pour améliorer et résoudre vos problèmes de référencement
Ayant subi un déclassement de Google du 24 mai au 9 juillet 2008 et, par conséquent pendant cette...
-
Installer un widget récapitulant vos questions/réponses sur Yahoo
Si vous avez un compte email Yahoo, vous pouvez intervenir dans la rubrique Questions/Réponses de...
-
Créer un GuestBook
Allez sur SLIDE Saisissez votre pseudo, uploadez votre avatar, entrez votre ville et...
-
Suivi des inscriptions sur des Bookmarks - Juin 2008
Cet article fait suite à s'inscrire sur des Bookmarks - Mai 2008 où vous trouverez une...
Publicité
Achetez sur le Net!
Coin Rencontre
Espace Connexion Internet
| Les Ficelles sur votre blog | Gardez le contact | L'Univers des Ficelles | Utilitaires | Générateurs | |
    
|
|||||
Commentaires