Un slider en Javascript avec JQuery

Posté par jbj le 27 nov 2007 dans Javascript/Ajax • 25 commentaires

Les sliders ont le vent en poupe ces jours-ci. J'ai eu l'occasion, pour un projet de ma société, de travailler avec un plug-in JQuery fort interessant, nommé Accessible News Slider. Voici quelques notes que j'ai prises concernant la personnalisation du slider.

Le plug-in, nommé Accessible News Slider, se télécharge sur ce site. La librairie JQuery, requise pour faire fonctionner le slider, est comprise dans l'archive. Vous n'aurez donc pas à la télécharger en plus.
Si vous êtes sous un système Linux, cette commande fera le boulot pour vous:
wget http://www.reindel.com/accessible_news_slider/accessible-news-slider-1.3.zip && unzip accessible-news-slider-1.3.zip
Une fois l'archive décompressée, le slider est fonctionnel: Il suffit d'ouvrir le fichier index.html dans Firefox.
Rien de bien compliqué jusque là Cependant, il y a de fortes chances que le look par défaut du slider ne convienne pas à la charte de votre site.

Personnalisation des éléments du slider

Le fichier slider.css contient les styles du slider. Le fichier style.css n'est là que pour la mise en forme de la page d'exemple, vous pouvez par conséquent le virer.

1 - Les boutons

Les images next.gif et prev.gif sont les deux boutons qui permettent de faire avancer ou reculer le slider. Ils sont définis dans le CSS via les classe .prev et .next.Elles sont positionnées en absolu et si vous désirez les remplacer par des images plus grandes, il fauda utiliser des marges négatives pour les placer. A noter, elles sont aussi définies avec une taille de 16*16px dans le fichier index.html.

2 - Le conteneur et l'espace visible

L'espace visible affiche par défaut deux blocs à la fois. Il est défini par la classe news_item. Un commentaire de l'auteur indique que sa longueur doit être égale à la longueur + la marge droite de item * 2. Si par exemple vous désirez afficher 5 blocs à la fois, la longueur de news_item devra etre de la longueur + la marge droite de item * 5, et ainsi de suite. Dans mon cas, je lui ai défini une longuer de 800px (Soit (140+20)*5, ce qui corresponds à la longueur des 5 blocs que je veux afficher simultanément ainsi que leur marge droite.
Attention, si vous augmentez la longueur de ce bloc, il masquera les boutons. Utilisez des marges négatives pour les replacer.
Le conteneur est quand à lui défini par la classe container. Par défaut, sa longueur est définie à 100%. Dans mon cas, je lui ai assigné 800px de long (cad, la longueur de mon news_item) à cause d'un bug (et oui, encore un...)plus ou moins inexplicable sous IE6 qui déconnais avec une longueur de 100%...

3 - Les blocs de contenu

Les blocs sont définis par la classe item. Cette classe doit impérativement posseder les attribut width et margin-right.

Le résultat

Tags: jquery, slider

25 commentaires

» Flux RSS des commentaires

Anonyme le 1 décembre 2007 à 1:36:
Un slider en Javascript avec JQuery…

Les sliders ont le vent en poupe ces jours-ci. Jai eu loccasion, pour un projet de ma socit, de travailler avec un plug-in JQuery fort interessant, nomm Accessible News Slider. Voici quelques notes que jai prises concernant la personnalisation du slide…
mirko le 3 décembre 2007 à 0:24:
Vraiment, merci pour tes explication qui m’on permis de customiser le plugin…j’avais déja essayé mais sans succes.
Dave le 7 décembre 2007 à 23:55:
Merci pour ton article! par contre j’ai un probleme, j’aimerais savoir comment tu peux modifier le slider pour changer le nombre de blocs qui défilent d’un coup à l’appuie sur un des deux boutons.

Merci d’avance et bonne continuation
jbj le 8 décembre 2007 à 0:00:
J’ai pas code sous les yeux, mais c’est facile: Dans le fichier js du slider, regarde ls functions correspondantes au classes .next et .prev…Il y a une ligne qui se termine par « *2″.
Il te suffit de changer le *2 par le nombre de bloc que tu veux voir défiler d’un coup (Exemple *5 te fera défiler les blocs 5 par 5)

J’espère que j’ai été assez clair
caizinho le 15 janvier 2008 à 13:57:
et sa on se démerde tout seul?
JBJ’s Blog » Wordpress » OpenBook, mon nouveau thème Wordpress “magazine” le 29 janvier 2008 à 14:41:
[...] 103, remplacez showposts=6 par le nombre de votre choix. J’ai écrit il y a quelques temps un article complet sur ce slider, réalisé avec jquery. Note: le slider n’est présent que sur la homepage du [...]
gwado le 31 janvier 2008 à 13:44:
ça marche en vertical ?
jbj le 31 janvier 2008 à 13:48:
Jamais essayé mais je pense pas. Si tu cherches un slider vertical, regarde du coté de JCarousel.
gwado le 1 février 2008 à 16:36:
Pas mal, merki bien
stounfr le 7 février 2008 à 18:00:
Je me demande s’il est possible de récupérer des les blocs de contenus, les enregistrements d’une Base de données
exemple : j’ai 25-30-55 (tout dépand du type de produit) produits dans ma base.
J’aimerai afficher mon résultat de requête SQL dans ce système de slides…
J’espère être assez clair
jbj le 7 février 2008 à 18:16:
Salut stounfr,
Oui, c’est tout à fait possible, le slider étant en xhtml standard et javascript non intrusif.
Comme je l’explique dans le tuto, les blocs sont définis par la classe css .item.
Il te suffit de coder le début du slider (c a d: jusqu’a la classe .item dans le code source de l’exemple) puis ensuite, pour chaque enregistrement en provenance de ta BDD, tu crée une nouvelle classe .item.
Quand tu as fini de boucler sur tes enregistrements, tu referme les div du slider.
Si tu veux un exemple concret de ce genre d’opération, télécharge mon thème wordpress « openbook» (celui que j’utilise sur le blog) et étudie le fichier header.php.

J’espère avoir été clair, le cas échéant n’hésites pas à me le signaler.
Bon dev!
stounfr le 7 février 2008 à 20:26:
Merci jbj pour ta réponse rapide,

je pensais bien que c’était possible, donc j’ai commencé à codé,

J’ai bien mes résulats de requête SQL mais cela me les affiches pas bien du tout.
Si tu veux jetter un coup d’oeil : http://www.stockalu.com/produits.html
et tu sélectionne un type de produit.
Stounfr
jbj le 7 février 2008 à 20:35:
Je viens de regarder vite fait ta page, en regardant le code source on s’aperçoit que tu fermes beaucoup trop de
dans ta boucle.
Essaie de virer les 3 derniers divs que tu fermes dans ta boucle (il faut peut etre les fermer après l’éxecution de la boucle par contre.
Bon courage et n’hésites pas.

PS: Je vais raccourcir ton commentaire, le code passe en effet assez mal dans Wordpress.
stounfr le 7 février 2008 à 22:07:
ok merci beaucoup, je regarde ca ce soir (oui je vis en guadeloupe) et te tiens au courant…
stounfr le 7 février 2008 à 22:37:
Bon, je n’ai pas pu attendre pour voir et bien BRAVO
TU ES UN CHEFFFFFFFFF
Tu peux retourner voir si tu veux sur le site de stockalu.com/produits.html

Stounfr
jbj le 7 février 2008 à 22:56:
Merci Ravi d’avoir pu t’aider et bonne continuation!
emilie60 le 20 février 2008 à 17:58:
Coucou, je voudrai savoir si c’est possible de faire le defilement en automatique, avec un setTimeOut je crois ?
jbj le 21 février 2008 à 0:05:
Salut, je ne me suis jamais penché sur la question mais c’est clairement faisable.
A mon avis, il faut que tu crée une fonction next() avec le code de jQuery(» .next» ,p).click(function())(ligne 24 il me semble) et tu la déclenche avec setTimeout(» next» ,5000);.
emilie60 le 21 février 2008 à 10:40:
merci, je vais tester cela !
Winsa le 23 février 2008 à 6:27:
Salut,

Encore une question a propos de ton thème : Comment faire si on as des images dans nos articles pour qu’elle s’affiche dans le slider ?
jbj le 23 février 2008 à 9:16:
@Winsa: réponse sur l’article sur le thème OpenBook
6 trucs pour améliorer le contenu de votre blog le 28 mai 2008 à 0:08:
[...] Est-il nécessaire de le préciser, le titre de votre article est primordial. celui-ci devra être précis, concis, et embarquer un certain nombre de mot clés que l’on retrouvera dans votre article. Un bon exemple, sur ce blog, de titre précis et optimisé: Un slider en Javascript avec JQuery. [...]
améliorer le contenu de votre blog !- icxdesign le 8 juin 2008 à 10:41:
[...] Est-il nécessaire de le préciser, le titre de votre article est primordial. celui-ci devra être précis, concis, et embarquer un certain nombre de mot clés que l’on retrouvera dans votre article. Un bon exemple, sur ce blog, de titre précis et optimisé: Un slider en Javascript avec JQuery. [...]
externe le 5 décembre 2008 à 9:47:
Bonjour,

je voulais savoir pour l’automatisation (le faire tourner en boucle) au chargement de la page
j’ai testé de rajoutter un setTimeout(”next”,5000); à partir de la fct next ligne 24 mais ça ne change rien du tout serait-il possible d’avoir plus de précision.

Merci par avance et bravo pour le tuto.
Bnnnnik le 25 janvier 2009 à 19:54:
pas mal