Voir Sample 2
Etape 1 :
Allez sur NoobSlide
Tout en bas de la page, cliquez sur Download
Vous venez d'enregistrer 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
- thumb_invisible.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
- thumb_invisible.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
- style.css
- notez leur adresse
Lors de la conception de ce slideshow, en HTML, collez
<head>Vous modifiez :
<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>
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
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)