Discussion :

[idamarco]

Bonjour Auteur,


Comment va?
Figure toi que cela fait 24 h que je cherche partout un script comme celui que tu as mis en ligne ici.
Comme quoi...

Je suis très intéressé par le diaporama horizontal.
J'ai vu pas mal de défilement mais aucun qui fait une pause comme le tien.

Mon projet:

Afficher en bas de page 5 vignettes.
Ces 5 vignettes font parties d'un total d'une trentaines de vignettes.

Donc, au lieu d'afficher 1 image à la fois, le script les affiche par paquet de 5.
Chacune à son propre lien.
Un paquet de 5 autres vient les remplacer comme sur ton modèle.

Jouable?

[Auteur]

bonjour,

j'ai modifier légèrement modifié le code pour qu'il réponde à tes attentes.
Dans le code j'ai ajouté une variable coef :

Code javascript :

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

1
2
3
4
5
6
 
/*********************************************************/
//***** Fonctions du diaporama *****//
var tempo = "1";
var pas = 4;
var coef = 2;	// nombre d'images à afficher dans la séquence

dans l'exemple je l'ai fixée à 2, pour afficher les images par groupe de 2.


----------------------------------------------------------------
Si tu veux afficher les images par groupe de 5 donne à la variable coef la valeur de 5 :

Code javascript :

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

1
2
3
4
5
6
 
/*********************************************************/
//***** Fonctions du diaporama *****//
var tempo = "1";
var pas = 4;
var coef = 5;	// nombre d'images à afficher dans la séquence

• La valeur de coef doit être un multiple du nombre total d'images à afficher !! Dans ton cas pas de souci tu as 30 images
  
• Par contre si tu en as 29, 31 ou 32 (bref un nombre d'images qui ne soit pas un multiple de coef), bien le script plante

Ensuite comme il y a plus d'images à afficher, il faudra sans doute modifier la largeur des cellules et du conteneur :

Code css :

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

1
2
3
4
 
.conteneur, .cellule{
	width: 600px;	/* valeur modifiable ;-) /!\ entrer une valeur en pixel /!\ */
}

Pour ce qui est du clic sur les images, il faut compléter cette fonction (il y a les commentaires et un exemple dans la pièce jointe) :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
 
// Action à réaliser lors du clic sur une cellule. 
// id est de la forme "celluleX" avec X compris entre 0 et tabImg.length-1
function clicSurImage(objCellule)
{
	switch (objCellule.id)
	{
           //.............
	}  
}

----------------------------------------------------------------
Et si vous voulez faire défiler qu'une image à la fois, tout simplement :

Code :

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

var coef = 1;

pas 0 ou de valeurs négatives !!!

[idamarco]

GENIAL!!

Superbe rendu avec mes vignettes.
Merci pour le code!
Je ne manquerai pas de vous montrer le résultat une fois fini.

Clap clap !!!


EDIT:
Salut Auteur,
Dis moi, y a til un moyen de virer la couleur de fond (blanc) derriere les images pour ne rien mettre du tout?
Merci à toi
RE EDIT:
En fait, après plusieurs test, j'ai des problemes à centrer les vignettes dans mon tableau.
Leur position n'est pas la même.
Ce qui pourrait résoudre mon probleme de position et de fond d'écran serait de faire apparaitre les images en fondu enchainé plutot qu'en coulissant.
Est compliqué?
Dois je ouvrir un autre post?

[idamarco]

Salut Auteur,
J'avais édité mon dernier message, peut etre ne l'avais tu pas vu.
Je me permets de le citer de nouveau.

EDIT:
Salut Auteur,
Dis moi, y a til un moyen de virer la couleur de fond (blanc) derriere les images pour ne rien mettre du tout?
Merci à toi
RE EDIT:
En fait, après plusieurs test, j'ai des problemes à centrer les vignettes dans mon tableau.
Leur position n'est pas la même.
Ce qui pourrait résoudre mon probleme de position et de fond d'écran serait de faire apparaitre les images en fondu enchainé plutot qu'en coulissant.
Est compliqué?
Dois je ouvrir un autre post?

Concernant le fond blanc, je n'avais pas vu la commande suivante, il suffit de supprimer la ligne du background.
Si cela interesse quelq'un...

Code :

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

1
2
3
4
5
 
vignettes{
  width: 40px;
  margin: 4px;
  background-color: #FFFFFF;

En ce qui concerne le positionnement, en décalant légerement sur la gauche le centrage du premier lot de 5 images, les autres blocs de 5 images sont centrés.
Tout compte fait ce n'est pas trop visible et pas si génant que cela.
Au vu du travail que tu fournis en répondant à nos questions, j'aurais mauvaise conscience à t'en demandé plus...
Donc très sincèrement, je laisse ma question ouverte au cas où il s'agit de remplacer une commande du type "défilement" par "fondu enchainé" sinon laisse tombé...
Merci bcp en tout cas pour ta disponibilité.

[Auteur]

idamarco >>
non effectivement je n'ai pas vu tes EDIT (lorsqu'un message est édité il n'y a pas de notifications).

Concernant le fond blanc, je n'avais pas vu la commande suivante, il suffit de supprimer la ligne du background.
Si cela interesse quelq'un...

je n'ai plus le script en tête à l'heure où j'écris ce message, mais si tu as pu résoudre ce problème tant mieux.

En fait, après plusieurs test, j'ai des problemes à centrer les vignettes dans mon tableau.
Leur position n'est pas la même.

ah... sans doute lié à la taille des images et de leur légende ? Si une image à une légende plus grande que celle de ses voisine, elle prendre un peu plus de place, je crois.

Ce qui pourrait résoudre mon probleme de position et de fond d'écran serait de faire apparaitre les images en fondu enchainé plutot qu'en coulissant.

Il faut jouer avec la propriété opacity du conteneur.

[idamarco]

ah... sans doute lié à la taille des images et de leur légende ? Si une image à une légende plus grande que celle de ses voisine, elle prendre un peu plus de place, je crois.

Aiiee, sur 30 images, une seule n'avaient pas la même dimension que les copines... La première...
Bien vu, je n'avais pas pris la peine de vérifier car j'étais sur des dimensions, comme quoi...