Voir Sample 1
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
- 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 1 (auto, every 5 sec)
var hs1 = new noobSlide({
box: $('box1'),
items: [1,2,3,4],
size: 480,
autoPlay: true
});
//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 1 -->
<h2>Sample 1</h2>
<div class="sample">
<div class="mask1">
<div id="box1">
<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>
</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
bonjour AnnaK
RépondreSupprimertout d'abord je vous remercie pour votre article, j'ai tenté de suivre vos instructions avec attention pour le modèle sample 1.
je rencontre un problème pour la modification du fichier style css, car je voudrais mettre que trois images, taille de chaque image : 722 x 212, enlever le fond noir/gris, le mettre en blanc, c'est pour mettre dans la partie bannière
lorsque que le temps vous le permettra pouvez-vous me guidez s'il vous plait ?
Par avance je vous remercie
Cordialement
Isabelle
ps: si vous souhaiter mon adres mail dites le moi, merci
Bonjour
RépondreSupprimerne tenez pas compte de ma demande
j'ai trouvé la solution avec le site alsacréations.
Cordialement