hover pour slideshow

Version imprimable

23/03/2015, 09h08
mantraax

hover pour slideshow

Bonjour,

j'essaie de réaliser un slideshow avec une fonction Hover sur les vignettes qui contrôlerait indirectement la timeline comme sur le site de la bnp: https://www.secure.bnpparibas.net/ba...Page?type=site

je pense avoir besoin de javascript mais je n'y connait pas grand chose en java

Pourriez vous m'aider svp?

Voici mon code: http://codepen.io/anon/pen/raoEYm

Merci
23/03/2015, 10h45
headmax

J'ai forké avec l'exemple

Salut voici un petit exemple il faut nettoyer le css maintenant bonne chance ;).

http://codepen.io/anon/pen/KwbOzq

Algo réalisé très vite fait en supposant que tu utilises JQuery :
Code:

1 2 3 4 5 6 7 8 9 10 11 $(document).ready(function() { // Au survol d'un des boutons $("#dots li").mouseover(function(this) { // Calcul du nombre de pixels duquel on doit déplacer le slider latéralement var nbPixels = ... // ne connaissant pas la taille de tes images, je te laisse gérer ce calcul // Déplacement latéral de ton slider $("#slideshow div.slider").scrollLeft(nbPixels); // Sinon, voici une version qui anime ce déplacement latéral $("#slideshow div.slider").animate({ scrollLeft: nbPixels }, 'fast'); }); });
Selon que tu utilises JQuery ou une autre librairie javascript (voire pas de librairie du tout), je te laisse adapter ce code à tes besoins ;)
(voire le débogguer car pas testé de mon côté ^^)

Dernière petite remarque : à mon avis, inutile de multiplier les imbrications de <div> : container et slider me semblent faire doublon. Ce serait sans doute plus propre de n'en garder qu'un seul.

23/03/2015, 17h25
mantraax

Merci beaucoup,

c'est vraiment plaisant de voir que certaine personne use de leur temps pour aider les autres

@headmax j'ai adapter le css et le html et recopier le javascript (je n'aime pas bêtement recopier je vais essayer de le comprendre mais il est hard)
il y a juste un hic le javascript fonctionne sous "codepen" mais après avoir créé un fichier .js , l'avoir placé dans un dossier nommé "js" et fait appel de ce fichier dans mon html rien ne fonctionne, c'est bizarre...
Aurais-je oublié quelque chose?

@chen norris j'ai trouvé ton code simple à comprendre et du coup intéressant à adapter à mon niveau lamentable mais après avoir rentré mes valeurs rien ne se passe...

Merci encore de votre aide ;)
23/03/2015, 17h41
headmax
Salut, ;)
Pour ton problème c'est a cause d'une librairie manquante jquery donc il faut que tu rajoute celle ligne au debut de ta balise <head>
Code:

1 2 3 4 <head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> ...
gl
23/03/2015, 18h39
mantraax

Mais oui mais c'est biensur!

Merci infiniment tout fonctionne comme je le voulais :)
je m'attendais juste à un code un peu plus court, je vais maintenant essayé de le décrypter...

Bonne soirée.
23/03/2015, 21h03
NoSmoking

Bonjour,

Citation:

je m'attendais juste à un code un peu plus court, je vais maintenant essayé de le décrypter...

décrypter les sources peut être pas nécessaire, mais lire la documentation officielle oui, sans oublier la FAQ jQuery ;)