Voir Sample 8
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
- 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
<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 8
var hs8 = new noobSlide({
box: $('box8'),
startItem: 1,
items: $ES('h3','box8'),
size: 480,
handles: $ES('span','handles8'),
buttons: {previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') },
onWalk: function(currentItem,currentHandle){
//style for handles
this.handles.extend(handles8_more).removeClass('active');
$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
//text for "previous" and "next" default buttons
$('prev8').setHTML('<< '+this.items[this.previousIndex].innerHTML);
$('next8').setHTML(this.items[this.nextIndex].innerHTML+' >>');
}
});
//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 8 -->
<h2>Sample 8</h2>
<div class="sample sample8">
<p class="buttons" id="handles8">
<span>Pane 1</span>
<span>Pane 2</span>
<span>Pane 3</span>
<span>Pane 4</span>
</p>
<div class="mask1">
<div id="box8">
<div>
<p class="buttons"><span class="prev"><<
Previous</span> <span class="next">Next >></span></p>
<h3>1. Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor.
Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p>
</div>
<div>
<p class="buttons"><span class="prev"><<
Previous</span> <span class="next">Next >></span></p>
<h3>2. Quisque aliquet accumsan</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor.
Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Quisque augue enim, rutrum quis, dignissim
quis, convallis molestie, nisi.</p>
</div>
<div>
<p class="buttons"><span class="prev"><<
Previous</span> <span class="next">Next >></span></p>
<h3>3. Duis consequat laoreet</h3>
<ul>
<li>Duis consequat laoreet libero.</li>
<li>Nullam scelerisque porta arcu.</li>
<li>Praesent ut tortor quis nunc vehicula interdum.</li>
<li>Cras ultrices venenatis justo.</li>
</ul>
</div>
<div>
<p class="buttons"><span class="prev"><<
Previous</span> <span class="next">Next >></span></p>
<h3>4. Aenean consectetuer</h3>
<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed
ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
</div>
</div>
</div>
<p class="buttons">
<span id="prev8"><< Previous</span> | <span id="next8">Next >></span>
</p>
<p class="buttons">
<span id="playback8"><Playback</span>
<span id="stop8">Stop</span>
<span id="play8">Play ></span>
</p>
<p class="buttons" id="handles8_more">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</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. Si votre blog est sur OB, vous pouvez utiliser mes adresses de fichiers.
En vert, les titres et textes de votre slideshow
Bonjour,
RépondreSupprimerJe souhaiterai insérer ce sample dans une de mes pages de mon site. Cependant, je veux juste un design tout bête, celui de mon site . Mais quand je l'insère, il met mon fond en gris...
Merci
Bonjour Max :)
RépondreSupprimerDans le fichier _web.css, ce fond gris (background:#666) est dans la ligne body
body{background:#666;font-family:'Lucida Sans Unicode',Arial,sans-serif;color:#333;text-align:center;padding:50px 0}
Il suffit de l'effacer ou de le remplacer par une autre couleur et ensuite d'enregistrer le fichier _web.css
OK merci beaucoup ... on peut aussi modifier le type d'écriture, tailles etc ?
RépondreSupprimerBonjour Max :) oui c'est modifiable.
RépondreSupprimerLes polices sont déjà là (font-family:'Lucida Sans Unicode',Arial,sans-serif)
les tailles (font-size:14px) sont à rajouter
dans cette même ligne body
Bonjour,
RépondreSupprimerJe cherche à insérer un pop up ou sera diffusé une vidéo à chaque visite d'un internaute.
Le bouton fermer ne devra apparraître que au bout de 10 secondes et devra masquer la page de l'article.
Est ce que quelqu'un pourrait m'aider .
Merci