# Comment creer un SlideShow en JavaScript



## Mabal972 (25 Février 2012)

Bonjour à tous,
Comme le dit le titre, j'aimerais créer un SlideShow en JavaScript, comme sur ce site:
http://www.wyodor.net/iWebBlogTest/WebBanner/

Pouvez vous m'aider svp?
Merci beaucoup
Mabal972


----------



## CBi (25 Février 2012)

Il y a des exemples plein le net mais je trouve que Flexslider sur base jQuery est très bon.


----------



## koeklin (25 Février 2012)

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

```
<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:

```
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 :

```
<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 :

```
<!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.

```
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. 

```
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

```
, '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"

```
, '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)

```
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

```
captions: true,
```
2. les boutons de commandes

```
controller: true,
```
3. les vignettes 

```
thumbnails: true,
```
é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 .


----------



## Mabal972 (25 Février 2012)

koeklin a dit:


> 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
> ...



Alors la BRAVOOOOO koeklin, de toutes ces explications si détaillées, MERCIIIIIIII
Ca fonctionne super bien, aucunes c...n...ries 

Et peux tu me dire sep?

-comment supprimer les petits numéros en bas a gauche des images, qui s'affichent dans une barre noire?

- Comment centrer droite/Gauche le SlideShow sur la page?

- et comment faire pour que le SlideShow soit collé au sommet de ma page HTML kom: 
http://www.wyodor.net/iWebBlogTest/WebBanner/

MERCI encore de ton aide précieuse, 
Je trouve ça passionnant, j'aimerais vraiment apprendre a maitriser tout ça, que me conseilles tu kom formation?
on peut apprendre sur internet?
Je ne veux pas être un pro de la création de sites Web, mais un amateur averti...
Bon Week End
Marc


----------



## koeklin (25 Février 2012)

A. Pour modifier la position du diaporama, éditer la balise de style en haut de la page slideshow/index.html

1. Avoir le diaporama collé en haut de la page et centré horizontalement 

```
<style>
	* { margin: 0;padding: 0; }
</style>
```
2. Avoir le diaporama collé en haut et à gauche de la page

```
<style>
	* { margin: 0;padding: 0; }
	.slideshow { float: left;}
</style>
```

B. Pour enlever les légendes d'un diaporama de type overlap
1. il faut editer le fichier javascript slideshow/js/slideshow.js
et remplacer :

```
captions: true,
```
par 

```
captions: false,
```

2. il faut aussi editer la ligne du fichier slideshow/index.html

```
new Slideshow('overlap', data, { captions: { delay: 1000 }, delay: 3000, height: 300, hu: 'images/', width: 400 });
```

enlever

```
captions: { delay: 1000 },
```
Pour ne garder que 

```
new Slideshow('overlap', data, {  delay: 3000, height: 300, hu: 'images/', width: 400 });
```


----------



## Mabal972 (25 Février 2012)

koeklin a dit:


> A. Pour modifier la position du diaporama, éditer la balise de style en haut de la page slideshow/index.html
> 
> 1. Avoir le diaporama collé en haut de la page et centré horizontalement
> 
> ...



Si je mets:
	<style>
	* { margin: 0;padding: 0; }
	</style>
c'est collé a droite

Si j'écris:
<style>
	* { margin: 0;padding: 0; }
	.slideshow { float: left;}
</style>
C'est collé à gauche

mais je n'arrive pas a le centrer horizontalement?
j'ai essayé avec :
"text-align: center;"
comme conseillé sur certains sites, mais cela ne fonctionne pas?

Merci encore à toi....


----------



## koeklin (26 Février 2012)

Editez  la largeur inscrite dans les 2 lignes du fichier slideshow/css/slideshow.html

```
.slideshow-images {
	height: 300px; width: 400px;
}
```


```
.slideshow {
	height: auto; margin: 0 auto; width: 400px;
}
```


----------



## Mabal972 (26 Février 2012)

Désolé koeklin, j'ai suivi et refait plusieurs fois tes indications, mais le SlideShow n'est toujours pas centré horizontalement!

aussi permets moi de te joindre mes fichiers,
j'espère que tu pourra trouver la soluce

Merci encore....


----------



## koeklin (1 Mars 2012)

koeklin a dit:


> Editez  la largeur inscrite dans les 2 lignes du fichier slideshow/css/slideshow.html


Mince, j'ai écrit slideshow.html, il fallait lire slideshow.*css* .

De toutes façons, qu'il soit positionné à gauche, à droite ou centré, on s'en tape vu qu'il apparait dans un widget d'iWeb aux même dimensions. 

Pour une intégration dans iWeb :
vous publiez votre dossier slideshow dans le dossier racine de votre serveur FTP  à l'aide d'un client-FTP (cyberduck par ex.)*
vous récupérez l'URL de la page index.html*,
vous collez le code d'iframe dans un widget fragment HTML d'iWeb

```
<iframe src="http://adresse/de/votre/page/index.html" frameborder="0" width="600" height="400" scrolling="no" allowTransparency="true"></iframe>
```
vous remplacez l'URL de la page index.html dans le code de l'iframe (vous modifiez les largeurs et longueurs dans le code de cette iframe. 
Vous publiez

* _Si vous publiez sur mobileMe , remplacez ces étapes par celles-ci 
finder > Menu > Aller > iDisk > Mon iDisk puis
votre iDisk > Web > Sites 
vous glissez votre dossier slideshow dans ce dossier votre_iDisk/Web/Sites
Son URL est http://web.me.com/votre_pseudo/slideshow/indes.html_

**Si vous utilisez un nom de domaine personnel et que vous avez publiez le dossier slideshow dans le dossier racine de votre serveur, vous pouvez remplacer l'URL de la page index.html par le chemin

```
/slideshow/index.html
```


----------



## Mabal972 (1 Mars 2012)

Merci encore pour toutes ces explications
Marc


----------



## l anguille (8 Mai 2012)

Salut, 

J'utilise depuis pas mal de temps ce scripts par contre, j'ai 2 soucis majeurs.

Le 1er, c'est que je ne trouve pas la ligne à modifier pour supprimer ou réduire la bordure des vignettes car elle se chevauchent entre elles.

Le 2ème c'est qu'en changeant la dimension des images dans le scripts et/ou de mes images à visionner, je n'arrive pas à avoir une image correcte non coupée.
Exemple pour des photos en 640x480: 
	
	



```
new Slideshow('overlap', data, { captions: { delay: 1000 }, delay: 5000, height: 410, hu: 'images/', width: 370 });
```
Ce soucis se corse lorsque la photo en question est en "portrait".


Si l'un de vous connait les solutions de ces 2 problèmes, je serai le plus heureux.

@+

---------- Nouveau message ajouté à 18h16 ---------- Le message précédent a été envoyé à 18h05 ----------

Re

Pour mon 2ème problème, j'ai trouvé une partie de la solution. J'ai trouvé la ligne dans le fichier css/slideshow.css pour réduire ou virer la bordure des vignettes...

```
.slideshow-thumbnails a {
    display: block; float: left; outline: none; margin: 5px 5px 0 0; padding: 5px;
}
```
...mais malgré la bordure (padding) à 1px, j'ai toujours les vignettes qui se chevauchent même si j'augmente la taille du bandeau des vignettes (thumbails).

J'attends vos conseils

@+


----------



## momo-fr (10 Mai 2012)

Plus beau, plus modulable, basé sur jQuery : *slidesjs*


----------



## l anguille (30 Août 2012)

SAlut,

Plus beau, je ne pense pas. Et il n'y a pas les vignettes qui permettre de prévisualiser les prochaines photos.

@+

---------- Nouveau message ajouté à 21h33 ---------- Le message précédent a été envoyé à 21h32 ----------

Je n'ai toujours pas trouvé ma solution pour les photos en portrait style 480x680. Ce script est parfait si on a que des photos orientées de la même manière.

@+


----------

