Diaporama d'image qui s'enchaine en fondu lorsque l'on clique dessu

Coucou les loulous!
j'ai besoin de vous!
Je souhaiterais créer un diaporama (genre 10 images de 640px par 480px) qui s'enchaine en fondu lorsque l'on clique sur l'image, le tout dans la meme div! Il faut donc cliquer à chaque fois sur l'image pour que l'image suivante apparaisse!
De plus, je souhaiterais avoir plusieurs diaporama de ce type sur la même page, du coup si il était possible qu'à la consultation d'un deuxième diaporama sur la meme page, lorsque l'on clique dessus, le premier diaporama consulter se réinitialise à la première image.

Voila j'espere que mon explication est assez clair et surtout merci mille fois pour vos réponses!
La bizette

Bonjour,

Un slide peut se faire en quelques lignes de code. Mais pour le type de paramétrage auquel vous voulez souscrire... il vaut mieux avoir recours à un plugin javascript. Cycle2, un plugin jQuery, pourrait faire l'affaire. Mais il faut s'y coller! Consultez la doc et planchez dessus... il en vaut la peine.

J'en ai installé un exemplaire qui équipe actuellement la page d'accueil de mon signe.
Modifié par Olivier C (21 Nov 2013 - 20:11)

Justement, comme je le disais, il y a la doc, avec pleins de codes à exploiter, ici encore, etc (plus les codes sources des pages)...

Il faut bien comprendre qu'une demande comme celle-ci demandera un minimum de travail de votre part...
Modifié par Olivier C (21 Nov 2013 - 20:21)

Merci c'est gentil mais ca ne répond pas à ma problématique! Aucun de ces carrousels n'est configuré comme je le souhaiterais et je suis trop mauvais en javascript pour bousculer les codes! Si il était possible d'avoir une réponse plus précise ca serait au top! merci en tout les cas

Bonjour,

il n'existe évidemment aucun carrousel qui implémente cette façon d'agir précise. Cependant, plusieurs sont configurables:

Pour ce qui est de la navigation au click, cela se passe généralement dans les options de configuration que l'on peut mettre à l'initialisation. Il faut donc un carrousel qui offre ces options.

Pour ce qui est de réinitialiser un autre carrousel, il faut un carrousel qui permette d’interagir à des évènements. Cela se passe soit par la possibilité d'ajouter des callbacks (fonctions qui seront exécutées à des moments clés) ou que le carrousel lance lui-même des évènements. Bien sûr là il faudra coder un peu.

Et finalement une API exposée qui permette de remettre un carousel à sa position d'origine.

Rapidement, j'ai remarqué que jCarousel semble correspondre, il y en a sûrement d'autres.

quelqu'un pour m'aider??

Bonsoir,

si ce que tu veut est une suite d'image que tu affiche les unes aprés les autres au click, tu peut faire avec :focus.
2 solutions:
1) 1 suite de lien qui contiennent ton images et qui se ciblent mutuellement. ( <a> prend le focus naturellement en principe) tu peut doubler la règle avec :target ou utiliser seulement target si tu cible l'image a partir du lien (il faut penser a gerer le saut de page qui cale en haut de page ton conteneur ainsi ciblé, url de type /mapage.html#monimage2

2) une suite d'image avec l'attribut tabindex pour activer la prise de focus avec une règle CSS qui cible l'image suivante.

:focus + img

.
Quelques exemples identiques sur la méthodes mais avec des différences de styles et transitions:
http://codepen.io/gcyrillus/pen/ksvaw
http://codepen.io/gcyrillus/pen/nvfHy
http://codepen.io/gc-nomade/pen/jIbHA
http://codepen.io/gc-nomade/pen/EfkJK
http://codepen.io/gc-nomade/pen/emuiE
etc ...
Cette option nécessite l'attribut tabindex, mais le nombre d'image importe peu, c'est le sélecteur d'adjacence qui fait tout le travail, les possibilités reste simple et le sens ne peut être changé, le click permet de tourner en boucle, mais pas la navigation au clavier qui suit son cours dans tout le document.

Pour un slider qui glisse/gauche/droite/stop au click basé sur transition et text-indent : http://codepen.io/gc-nomade/pen/hlngD , qui n'est qu'un remake d'un bon vieux marquee et qui nécessite de connaitre la largeur totale des images.

En CSS toujours, tu peut ajouté des étapes à la transition avec step(start,nbre de palier) et faire quelque chose proche d'une animation simple.

Enfin, tu as les animations avec keyframes , ces derniers sont plus rigides , si le nombre d'elements a faire glisser change, il faut reprendre le 'scenario' mais permettent de maitriser de nombreux réglages.

Tu as parlé de diaporama, qui généralement se lance seul ou en un click en bouclant sur tes images, et pour un projet important, on s'appuie sur du javascript pour un maximum de compatibilité et d'assurance, d’où les nombreux liens qui te sont donnée vers des plugins du framework jQuery. Voici un autre slider qui tente de se passer de js et de rester accessible pour des navigateurs un peu moins jeunes : http://codepen.io/gcyrillus/details/vqkgf
Quelques essais avec différents navigateur finiront par t' aiguiller vers le choix des méthodes a choisir , pense qu'il y a méthode et style cote à cote. Une fois que tu as opté / compris une methode, il reste a y donner le style que tu veut (taille, bordures, couleurs, arrondis, ombrages, etc ...)

++

Déjà merci pour toute ces réponses! Malheureusement, elle ne m'aide pas! J'ai un mauvais niveau en javascript et vos réponses explicatives ne m'avance pas, c'est pourquoi il me faudrait du code.

Je recommence mon explication :
Je souhaiterais créer un diaporama (genre 10 images de 640px par 480px) qui s'enchaine en fondu lorsque l'on clique sur l'image, le tout dans la meme div! Il faut donc cliquer à chaque fois sur l'image pour que l'image suivante apparaisse! Je précise que par défaut (cad lorsque l'on arrive pour la première fois sur la page), le carrousel ne fonctionne pas seul puisqu'il ne fonction qu'au clic.
De plus, je souhaiterais avoir plusieurs diaporama de ce type sur la même page, du coup si il était possible qu'à la consultation d'un deuxième diaporama sur la meme page, lorsque l'on clique dessus, le premier diaporama consulter se réinitialise à la première image.
Mes connaissances étant limité, toute ligne de code concrète et en rapport avec l'énnoncé seront les bienvenue

quelqu'un svp, soyez des amours

tshinkiz a écrit :
Déjà merci pour toute ces réponses! Malheureusement, elle ne m'aide pas! J'ai un mauvais niveau en javascript et vos réponses explicatives ne m'avance pas, c'est pourquoi il me faudrait du code.

Je recommence mon explication :
Je souhaiterais créer un diaporama (genre 10 images de 640px par 480px) qui s'enchaine en fondu lorsque l'on clique sur l'image, le tout dans la meme div! Il faut donc cliquer à chaque fois sur l'image pour que l'image suivante apparaisse! Je précise que par défaut (cad lorsque l'on arrive pour la première fois sur la page), le carrousel ne fonctionne pas seul puisqu'il ne fonction qu'au clic.
De plus, je souhaiterais avoir plusieurs diaporama de ce type sur la même page, du coup si il était possible qu'à la consultation d'un deuxième diaporama sur la meme page, lorsque l'on clique dessus, le premier diaporama consulter se réinitialise à la première image.
Mes connaissances étant limité, toute ligne de code concrète et en rapport avec l'énnoncé seront les bienvenue

les exemples en lignes que je te donne font exactement ça , excepté le fondu qui n'est que mise en forme, a toi de jouer avec opacity et z-index ....

j'avais tenter un brouillon de tuto au printemps 2012 : http://yidille.free.fr/discontinu/tuto.html qui pourrait t'amener a faire ça : http://codepen.io/gc-nomade/pen/xcfjD

Faudrait quand même que tu fasses l'effort de comprendre ce que tu copie/colle ... sinon emploi quelqu'un, histoire d’être capable de faire la maintenance entre autre
++

Un grand merci!!! t'es au top gc-nomade!!