diaporama en javascript

**tang le breton** · 31/03/2009, 10h56

Bonjour,

je suis a la recherche d'une solution afin de pouvoir faire défiler des images 3 par 3 horizontalement dans mon diaporama...

Cet exemple permet de choisir une photo (en haut) et de l'afficher ensuite dans un <div>.
mais les photos du haut sont fixes... au lieu d'avoir directement les neufs photos en haut je voudrai en avoir 5 c'est-à-dire que lorsque l'on clique sur une photo (par exemple la 4) ca affiche, en haut, les images 2-3-4-5-6 et non les 9 photos directs ...???

Merci d'avance pour votre aide ...

**le_chomeur** · 31/03/2009, 11h09

essaye ceci ( voir en pièce jointe

)

( rajoute juste des images avec le bon nom dans le dossier images ... )

**tang le breton** · 31/03/2009, 11h26

nikel je vais tester tous ca je te tiens au courant ... merci

**tang le breton** · 31/03/2009, 14h00

le script est nikel , c'est exactement ce que je recherche mise à part qu'il ne m'affiche aucune photo dans le cadre du haut ... (il y a le rond qui recherche toujours et qui se bloque lorsque l'on clique sur une photo en bas)...
j'utilise le php afin d'incrémenter toutes les photos voulus par l'utilisateur peut être que ça viendrait de là ??

**tang le breton** · 31/03/2009, 14h18

ah non en fait j'ai pas mal d'images mais elles sont dans mon dossier "photos" du coup je voulais savoir si on pouvais changer le chemin (aller chercher les photos dans le dossier "photos" et non dans le dossier "images") ??

**le_chomeur** · 31/03/2009, 14h23

oui , dans la source modifie la balise img :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<img src="images/img1.jpg" alt="images/Grande_im5.jpg">
en 
<img src="photos/img1.jpg" alt="photos/Grande_im5.jpg">

**tang le breton** · 31/03/2009, 16h02

merci beaucoup "le chomeur" pour les réponses rapides et ce script parfait ...

c'est sympa de m'avoir aider ...

bonne continuation

**tang le breton** · 01/04/2009, 08h58

ton script marche a merveille mais j'aurai aimer rajouter du code pour afficher l'image directement sélectionner dans la galerie avant ...
c'est à dire qu'un utilisateur selectionne une image dans ma galerie d'image, une fois qu'il clique dessus ca m'ouvre ton script et j'aimerai afficher du coup l'image qu'il vient de cliquer (et il se balade après dans le diaporama grace a ton script de defilement des images) ???
je ne sais pas si c'est possible ou pas...

**le_chomeur** · 01/04/2009, 09h08

réfléchissementttttt => oui ^^

alors explication :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<div class="diaporama">
		<div class="afficheCurrent"><img src="images/loader.gif" id="test" class="Loader" /></div>
 
	<a href="#" class="buttonL" onclick="test2.positionner(+1)"></a>
	<div id="toto" style="position:relative;width:440px;height:110px;float:left;overflow:hidden">
		<div id="contenant2" class="defil">
			<img src="images/img1.jpg" alt="images/im5.jpg">
			<img src="images/img2.jpg" alt="http://www.worldinhd.com/movabletype/archives/news/carsHD-thumb.jpg">
			<img src="images/img3.jpg" alt="http://news-images.caradisiac.com/IMG/jpg/7/9/1/5/0/Gran-Turismo-HD-3.jpg">
			<img src="images/img4.jpg" alt="http://www.infopccenter.com/images/AutresImages/HARDWARE/Toshiba/Toshiba1.JPG">
			<img src="images/img1.jpg" alt="http://www.spacetelescope.org/images/large/heic0720a.jpg">
			<img src="images/img2.jpg" alt="images/im5.jpg">
 
			<img src="images/img3.jpg" alt="images/im5.jpg">
			<img src="images/img4.jpg" alt="images/im5.jpg">
			<img src="images/img1.jpg" alt="images/im5.jpg">
			<img src="images/img2.jpg" alt="images/im5.jpg">
			<img src="images/img3.jpg" alt="images/im5.jpg">
			<img src="images/img4.jpg" alt="images/im5.jpg">
			<img src="images/img1.jpg" alt="images/im5.jpg">
			<img src="images/im7.jpg" alt="images/im5.jpg">
			<img src="images/img2.jpg" alt="images/im5.jpg">
 
 
		</div>
	</div>	
	<a href="#" class="buttonR" onclick="test2.positionner(-1)"></a>
	<span class="cleaner"></span>
	</div>

ceci est le code de la galerie , il te suffit donc , de créer une autre liste de miniature qui affichera la galerie dans une nouvelle div modal par exemple

Je n'ai pas le temps de te faire le code mais ce n'est pas compliqué du tout ( voir repartir du code existant pour éviter d'avoir a recréer une liste de miniature en la clonant et lui donnant un nouveau style ...

**tang le breton** · 01/04/2009, 12h07

je ne suis pas sur d'avoir bien cerner ta réponse,
en fait il faut que je créer un autre galerie avec la valeur de l'image sélectionnée (je récupère le numéro de l'image par un $_GET) ??

**le_chomeur** · 01/04/2009, 13h25

heu non du tout ... on reprend :

tu as une liste d'image SIMPLE sans aucun diaporama

puis au click sur l'un des images, tu affiches le diaporama dans une div qui prend toute la page
- tu navigues ensuite avec le nouveau diaporama

**tang le breton** · 01/04/2009, 15h32

excuse moi de te déranger (encore) , mais j'arrive pas a comprendre parfaitement le fonctionnement.
oui j'ai bien une page "galerie.php" d'image (sans diaporama) et lorsque je clique sur une image il m'ouvre ton script "tourneenboucle.htm" avec, normalement, l'image voulue dans le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="afficheCurrent">
<img src="photos/loader.jpg" id="test" class="Loader" />
</div>

ensuite l'utilisateur peut se balader avec les miniatures en bas...
mais ce que je ne comprend pas c'est l'histoire d'un "nouveau" diaporama car il me faut dans tous les cas récupérer l'id de mon image selectionner dans "galerie.php" ??
ou alors je considère ce code comme étant la galerie et le diaporama ???

**le_chomeur** · 01/04/2009, 16h47

tu peux passer l'id de l'image a afficher a la méthode d'affichage , indépendamment de la galerie ... ( je ne sais pas si c'est clair :-/ )

**tang le breton** · 01/04/2009, 16h56

je rajoute l'id de l'image en paramètre dans la fonction de l'affichage en javascript ?

**tang le breton** · 02/04/2009, 10h03

c'est bon CA MARCHE...
merci beaucoup pour ton aide, après quelques heures de réflexion le principe n'était pas si compliquer...
merci encore d'avoir pris le temps

**le_chomeur** · 02/04/2009, 10h12

je t'en prie ^^
je serais heureux de voir le résultat ??

**tang le breton** · 02/04/2009, 12h03

C'est un site fini "a l'arrache" c'est pour quoi je remet le nez dedans afin de le remettre en l'état (couleur, optimisation des images, contenu, etc ...)

http://afonlacaisse.free.fr/index.php?page=galerie_test&soiree=1&numimg=45

Merci encore

**le_chomeur** · 02/04/2009, 12h14

ha ouep ça rend pas mal

**tang le breton** · 02/04/2009, 12h23

je sais que je ne suis pas dans le bon forum mais je voudrai savoir comment redimensionner une image (comme dans le diaporama défilant) puisqu'il y a des images plus large et d'autre plus longue ??

**le_chomeur** · 02/04/2009, 13h01

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function reDimImage(img_Src, W_max, H_max) {
	   // ----------------------------------------------------
	   // Lit les dimensions de l'image source
	   W_Src = img_Src.width; // largeur source
	   H_Src = img_Src.height; // hauteur source
	   // ----------------------------------------------------
	   if(!W_max) { W_max = 0; }
	   if(!H_max) { H_max = 0; }
	   // ----------------------------------------------------
	   // Teste les dimensions tenant dans la zone
	   var ratio = 0 ;
	   if(W_max < W_Src){
	   		ratio = W_max / W_Src ;
			//Redimensionnement selon la largeur
			H = Math.round(H_Src * ratio);
			W = Math.round(W_Src * (H / H_Src));
	   }
	   if(H_max < H_Src){
	   	    //Redimensionnement selon la hauteur
	   		ratio = H_max / H_Src;
			W = Math.round(W_Src * ratio);
			H = Math.round(H_Src * (W / W_Src));
	   }
	   //Sinon on laisse les dimansions de base
	   if(ratio == 0){
	   	W = W_Src;
		H = H_Src;
	   }
	         //Redimensionne l'image source automatiquement ;-)
		 img_Src.style.width = W + "px";
		 img_Src.style.height = H + "px";
	}

diaporama en javascript

JavaScript

Discussions similaires

Partager

Partager