Bon je ferais pas un truc comme ça tous les soirs :
Le slideshow de Wyodor utilise "
slideshow2!" de Aeron Glemann
que vous pouvez télécharger
ici
1.Vous téléchargez ce dossier nommé slideshow
2.Ouvrez le fichier slideshow/index.html avec un éditeur de texte fait pour le code ex. TextWrangler ( éviter TextEdit) tout en vérifiant l'affichage de cette page index.html dans un navigateur
3. il y a six slideshows (overlap, noOverlap, flash, fold, kenburns, push) en exemple dans la page index.html
Choisissez un type de slideshow et effacez les lignes inutiles (qui correspondent aux autres type de slishows) avec votre éditeur de texte : par ex. si vous utilisez un slideshow de type
overlap (qui va me servir d'exemple ici) mieux vaut effacer les lignes correspondant aux slideshow noOverlap, flash, push, kenburns et fold
et donc vous pouvez effacez ces lignes dans la balises head
Bloc de code:
<script src="js/slideshow.flash.js"></script>
<script src="js/slideshow.fold.js"></script>
<script src="js/slideshow.kenburns.js"></script>
<script src="js/slideshow.push.js"></script>
et aussi celles ci plus bas:
Bloc de code:
new Slideshow('noOverlap', data, { height: 300, hu: 'images/', overlap: false, resize: 'fit', width: 400 });
new Slideshow.Flash('flash', data, { color: ['tomato', 'palegreen', 'orangered', 'aquamarine'], height: 300, hu: 'images/', width: 400 });
new Slideshow.Fold('fold', data, { height: 300, hu: 'images/', width: 400 });
new Slideshow.KenBurns('kenburns', data, { duration: 1500, height: 300, hu: 'images/', width: 400 });
new Slideshow.Push('push', data, { height: 300, hu: 'images/', transition: 'back:in:out', width: 400 });
ainsi que celles-ci dans la balises body :
Bloc de code:
<div id="noOverlap" class="slideshow">
<img src="http://forums.macg.co/images/1.jpg" alt="1">
</div>
<div id="flash" class="slideshow">
<img src="http://forums.macg.co/images/1.jpg" alt="1">
</div>
<div id="fold" class="slideshow">
<img src="http://forums.macg.co/images/1.jpg" alt="1">
</div>
<div id="kenburns" class="slideshow">
<img src="http://forums.macg.co/images/1.jpg" alt="1">
</div>
<div id="push" class="slideshow">
<img src="http://forums.macg.co/images/1.jpg" alt="1">
</div>
Pour ne plus vous retrouvez qu'avec ça :
Bloc de code:
<!doctype html>
<html>
<head>
<title>Slideshow 2!</title>
<meta charset="utf-8">
<meta name="author" content="[Aeron Glemann](http://www.electricprism.com/aeron/)">
<link rel="stylesheet" href="css/slideshow.css">
<style>
.slideshow { float: left; margin: 50px; }
</style>
<script src="js/mootools-1.3.2-core.js"></script>
<script src="js/mootools-1.3.2.1-more.js"></script>
<script src="js/slideshow.js"></script>
<script>
window.addEvent('domready', function(){
var data = { '1.jpg': { caption: '1' }, '2.jpg': { caption: '2' }, '3.jpg': { caption: '3' }, '4.jpg': { caption: '4' }};
new Slideshow('overlap', data, { captions: { delay: 1000 }, delay: 3000, height: 300, hu: 'images/', width: 400 });
});
</script>
</head>
<body>
<div id="overlap" class="slideshow">
<img src="http://forums.macg.co/images/1.jpg" alt="1">
</div>
</body>
</html>
4.Mettez des images de même dimensions dans le dossier sldeshow/images, renommez les avec des noms simples (pas d'espace, pas de caractère accentués, pas de caractères bizaro¨des dans le nom)
5. Editez la ligne ( cela correspond à un table javascript associant vos images et leurs légendes.
Bloc de code:
var data = { '1.jpg': { caption: '1' }, '2.jpg': { caption: '2' }, '3.jpg': { caption: '3' }, '4.jpg': { caption: '4' }};
Et remplacer 1.jpg et cie par le nom de vos images par ex.
Bloc de code:
var data = { 'monimage1.jpg': { caption: '1' }, 'monimage2.jpg': { caption: '2' }, 'monimage3.jpg': { caption: '3' }, 'monimage4.jpg': { caption: '4' }, 'monimage5.jpg': { caption: '5' }, 'monimage6.jpg': { caption: '6' }};
vous pouvez même ajouter de nouvelle image , il suffit de rajouter un extrait de ce style
Bloc de code:
, 'manouvelleimage.jpg': { caption: '7' }
faites attention il n'y a pas de virgule après la dernière image ici 'monimage6.jpg': { caption: '6' }
Sauvegarder etvérifier que l'affichage de votre page index.html est corrrecte en l'ouvrant dans un navigateur.
6. Si vous souhaitez affichez des légendes, éditez les légendes (les légendes par défaut 1, 2 , 3 ,4 etc. c'est pas terrible!). Autant que possible éviter les apostrophes (= guilemets) dans vos légendes, elles ont une signification en javascript et vont preter à confusion. si vous ne pouvez pas vous passez d'apostrophe, ajoutez un \ devant l'apostrophe par ex. pour une légende du type "l'équilibre"
Bloc de code:
, 'manouvelleimage.jpg': { caption: 'L\'équilibre' }
Vérifiez la affichage dans un navigateur
7. Editez cette ligne pour modifier la taille (ici 300x400) et le delai entre chaque diapo (ici 3000ms)
Bloc de code:
new Slideshow('overlap', data, { captions: { delay: 1000 }, delay: 3000, height: 300, hu: 'images/', width: 400 });
8. Editez le fichier slideshow/js/slideshow.js
Entre la ligne 23 et 53 vous avez une liste d'options, les plus intéressantes etant d'afficher ou pas (true ou false)
1. les légendes
2. les boutons de commandes
3. les vignettes
éditez sauvegarder ce fichier.js
Affichez votre page index.html dans un navigateur.
Puis , si c'est ok, vous l'uploadez le dossier slideshow dans le dossier racine de votre serveur à l'aide d'un client-ftp (ex. cyberduck).
J'espère que j'ai rien oublié et que j'ai pas écrit trop de c...n...ries .
