Voir Sample 4
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
<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 4 (walk to item)
var hs4 = new noobSlide({
box: $('box4'),
items: $ES('div','box4'),
size: 480,
handles: $ES('span','handles4'),
onWalk: function(currentItem,currentHandle){
$('info4').setHTML(currentItem.getFirst().innerHTML);
this.handles.removeClass('active');
currentHandle.addClass('active');
}
}
//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 4 -->
<h2>Sample 4</h2>
<div class="sample">
<div class="mask3">
<div id="box4">
<div>
<h3>1. Lorem ipsum dolor sit amet</h3>
<img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img1.jpg"
alt="Photo" />
<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. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
</div>
<div>
<h3>2. Nullam porttitor tortor et sem</h3>
<img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img2.jpg"
alt="Photo" />
<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. Nulla lobortis, leo elementum fringillamollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p>
<p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesentat lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
</div>
<div>
<h3>3. Aenean consectetuer nibh sedt</h3>
<img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img3.jpg"
alt="Photo" />
<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>
<li>Duis eu ligula at justo tempus varius.</li>
<li>Vivamus mattis ante et arcu.</li>
<li>Nulla eleifend dignissim neque.</li>
<li>Donec ut elit vel nisi mollis volutpat.</li>
</ul>
</div>
<div>
<h3>4. Pellentesque ac dolor</h3>
<img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img4.jpg"
alt="Photo" />
<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. Nulla lobortis, leo elementum fringillamollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
</div>
<div>
<h3>5. Pellentesque ac dolor</h3>
<img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img5.jpg"
alt="Photo" />
<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>Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus.Aenean tincidunt. In hac habitasse platea dictumst.</p>
</div>
<div>
<h3>6. Lorem ipsum dolor sit amet</h3>
<img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img6.jpg"
alt="Photo" />
<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. Nulla lobortis, leo elementum fringillamollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
</div>
<div>
<h3>7. Nullam porttitor tortor et sem</h3>
<img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img7.jpg"
alt="Photo" />
<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. Nulla lobortis, leo elementum fringillamollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p>
<p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesentat lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
</div>
<div>
<h3>8. Aenean consectetuer nibh sedt</h3>
<img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/noobSlide/img8.jpg"
alt="Photo" />
<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>
<li>Duis eu ligula at justo tempus varius.</li>
<li>Vivamus mattis ante et arcu.</li>
<li>Nulla eleifend dignissim neque.</li>
<li>Donec ut elit vel nisi mollis volutpat.</li>
</ul>
</div>
</div>
</div>
<h4>Show: <span id="info4"></span></h4>
<p class="buttons" id="handles4">
<span>1. Uno</span>
<span>2. Dos</span>
<span>3. Tres</span>
<span>4. Cuatro</span>
<span>5. Cinco</span>
<span>6. Seis</span>
<span>7. Siete</span>
<span>8. Ocho</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 et textes 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)