wSlide, plugin jquery qui va faire glisser vos listes
30/01/2008
Je vous présente wSlide, mon 1er plugin pour jQuery (enfin, officiellement) !
wSlide va vous permettre de transformer n'importe quelle liste en une sorte de visionneuse, aussi bien pour du texte que pour des images. La pagination peut être automatiquement générées, ou pas.
Rien ne vaut une démonstration live:
Voici les explications ....
Pourquoi ce plugin ?
Principalement pour gagner de la place dans vos pages web. Les longues listes sont souvent fatigantes à lire, on scroll dans tous les sens. Vous pourriez par exemple alléger vos sidebars en regroupant plusieurs parties avec ce plugin.
Features
- Pagination automatique (désactivable)
- Personnalisation facile par CSS
- Choix de la position de départ
- Choix du sens de glissement (horizontal ou vertical)
- Possibilité de défilement en diagonal
- Compatible avec le plugin easing (pour des effets, comme le rebond)
- Possibilité de fondue
- Choix de la durée de la transition
Testé sur ...
- Firefox
- Opera
- Internet Explorer 6 et 7
Exemples
Téléchargement
- jquery.wslide.js (version 0.1, compressée)
- jquery.wslide.js (version 0.1, non compressée)
- wslide_demo.zip (les fichiers d'exemple)
Installation
- 1. On inclu la librairie jQuery dans la page (si ce n'est pas déjà fait) ainsi que le plugin wslide entre les balises HTML
<head>et</head>
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.wslide.js"></script>
<script type="text/javascript" src="jquery.wslide.js"></script>
- 2. Prenons une simple liste html comme celle-ci
<ul id="ma_liste">
<li>Lorem ipsum ad delenit omittam his, habeo justo ad sea! Eu mel volumus noluisse disputando! Cu prompta moderatius sit? Et iuvaret suavitate vix, ne eum audiam luptatum, nam in epicuri adipisci scripserit.</li>
<li>His ad copiosae erroribus, has eu mucius cotidieque concludaturque. No appareat iracundia complectitur eum, pri an euismod corrumpit, zzril animal mnesarchum id sed. Ex duis erat persius est, ne vis assum timeam tamquam, rebum quaeque civibus in qui. Populo animal dissentiunt in eos. Ludus molestie ut vix, eum eros lobortis id.</li>
<li>Quodsi dissentiunt cu eos, duo cu clita veritus, mei quot velit scriptorem ea? At kasd dolorum facilisi per, te discere inermis patrioque duo. Integre nominati sapientem has et? Ad erat essent ius, pro quando menandri definitiones te?</li>
<li>Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.</li>
<li>In eum natum facete, in eum vero vidit consectetuer. Alii oportere signiferumque id nam, mandamus recteque pro at? Eu perpetua sadipscing pro, pro omittam invenire ex. Sit no nemore omnium accommodare, sit in idque inani! Ut quo ubique dictas nostrud. Eum at quis pericula repudiandae, usu ne ornatus explicari vulputate.</li>
<li>Simul tantas nostrum at has, his id postulant cotidieque, in eum omnium mediocrem moderatius! Pro oratio scriptorem ei, causae accusata est te. Ex quod nonummy has, usu et omnium probatus deterruisset! Ea impetus percipit takimata has. No qui probo dolore convenire. Et conceptam intellegat sententiae sit, has ex tota nobis.</li>
<li>Nostrum volutpat cu ius. Sed affert aliquyam ea? An quo verear accumsan voluptaria. Id graeci audire sit.</li>
<li>Pri petentium definitiones ad? Utinam delenit eos ex? Vim ea discere officiis conclusionemque, ad his lorem ponderum praesent? Ut vim consul timeam iracundia, mel civibus posidonium et, nam ea audire evertitur. An docendi pertinacia eum, utroque officiis his ne?</li>
</ul>
<li>Lorem ipsum ad delenit omittam his, habeo justo ad sea! Eu mel volumus noluisse disputando! Cu prompta moderatius sit? Et iuvaret suavitate vix, ne eum audiam luptatum, nam in epicuri adipisci scripserit.</li>
<li>His ad copiosae erroribus, has eu mucius cotidieque concludaturque. No appareat iracundia complectitur eum, pri an euismod corrumpit, zzril animal mnesarchum id sed. Ex duis erat persius est, ne vis assum timeam tamquam, rebum quaeque civibus in qui. Populo animal dissentiunt in eos. Ludus molestie ut vix, eum eros lobortis id.</li>
<li>Quodsi dissentiunt cu eos, duo cu clita veritus, mei quot velit scriptorem ea? At kasd dolorum facilisi per, te discere inermis patrioque duo. Integre nominati sapientem has et? Ad erat essent ius, pro quando menandri definitiones te?</li>
<li>Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.</li>
<li>In eum natum facete, in eum vero vidit consectetuer. Alii oportere signiferumque id nam, mandamus recteque pro at? Eu perpetua sadipscing pro, pro omittam invenire ex. Sit no nemore omnium accommodare, sit in idque inani! Ut quo ubique dictas nostrud. Eum at quis pericula repudiandae, usu ne ornatus explicari vulputate.</li>
<li>Simul tantas nostrum at has, his id postulant cotidieque, in eum omnium mediocrem moderatius! Pro oratio scriptorem ei, causae accusata est te. Ex quod nonummy has, usu et omnium probatus deterruisset! Ea impetus percipit takimata has. No qui probo dolore convenire. Et conceptam intellegat sententiae sit, has ex tota nobis.</li>
<li>Nostrum volutpat cu ius. Sed affert aliquyam ea? An quo verear accumsan voluptaria. Id graeci audire sit.</li>
<li>Pri petentium definitiones ad? Utinam delenit eos ex? Vim ea discere officiis conclusionemque, ad his lorem ponderum praesent? Ut vim consul timeam iracundia, mel civibus posidonium et, nam ea audire evertitur. An docendi pertinacia eum, utroque officiis his ne?</li>
</ul>
- 3. On ajoute le bout de javascript qui va initialiser la liste, et en même temps définir les options.
Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js
Par contre il doit impérativement ce trouver après le plugin.
$(document).ready(function(){//on attend que la page soit chargée
//on donne l'id de la liste visée, et on lui donne ses paramètres
$("#ma_liste").wslide({
width: 500,
height: 333,
horiz: true
});
//si vous avez d'autre listes, placez leur code d'initialisation ici à la suite ....
//$("#autre_liste").wslide({ ...
});
//on donne l'id de la liste visée, et on lui donne ses paramètres
$("#ma_liste").wslide({
width: 500,
height: 333,
horiz: true
});
//si vous avez d'autre listes, placez leur code d'initialisation ici à la suite ....
//$("#autre_liste").wslide({ ...
});
Options
Les options sont à définir lors du code d'initialisation ({option1: val, option2: val, option3: val, etc ...})
widthetheight: La taille du bloc qui contiendra votre liste (Défaut=150)pos: La position de départ par défaut (Défaut=1)col: Le nombre de colonnes, si plus grand que1, alors vous aurez un effet de navigation en diagonal (Défaut=1)effect: Le type d'effet que vous voulez pour la transition, pour celà il vous faudra le plugin easing (Défaut=swing)fade: Transition avec effet d'apparition et disparition, du coup, le sens de la transition n'importe plus (Défaut=false)horiz: Active le défilement horizontal (Défaut=false)duration: La durée de la transition en millisecondes (Défaut=1500)autolink: Indique si vous voulez un menu de navigation généré automatiquement. Si vous creez votre propre menu, mettezautolink: false. Si vous voulez que le menu soit généré automatiquement, mais dans une autre div, mettezautolink: 'id_de_la_div_menu'
Questions ?
- Comment écrire mon propre menu de navigation en dur dans la page?
- Comment personnaliser le menu automatiquement généré d'une liste spécifique ?
- Comment personnaliser en une fois tous les menus automatiquement généré ?
- Comment personnaliser le conteneur d'un liste spécifique ?
- Comment personnaliser tous les conteneurs de liste en une fois ?
- Comment personnaliser le numéro de page actif ?
Conclusions
Comme c'est mon 1er plugin, il est possible que vous rencontriez une ou deux coquilles (que je me ferais un plaisir de corriger, dans la mesure du possible). Pour les exemples, j'ai commenté le code source des pages pour que vous puissiez vous en inspirer.
jQuery rulllllllllezzzzzzz !
Traduction
- Explicaciones en español por Nikko. | Explanations in Spanish by Nikko. (Thanks !)
- Spiegazione in italiano di Giuseppe. | Explanations in Italian by Giuseppe. (Thanks !) + Esempio 1 | Esempio 2 | Esempio 3
-----Pages: Page suivante
Guide pour mieux gérer vos emails via gmail (multicompte, redirection, ...)
Comment réussir vos concours sur vos blogs ?
Brève Wordpress: 40 liens, thèmes, plugins et astuces en tout genre !
Ajouter un lien pour envoyer la page par e-mail
Bonjour,
tout d’abord,merci pour ce chouette plugin!
Je l’utilise dans une petite galerie d’images que j’ai créée. J’ai également besoin de la fonction « previous – next ». N’ayant pas réussi à l’implémenter, j’ai remplacé cette fonction par un simple lien sur les images qui pointe vers l’image suivante. Très facile à faire dans une boucle, avec l’avantage de donner comme lien à la dernière image la valeur de la première image, pour que ça boucle à l’infini.
Ca fonctionne très bien, si ce n’est que le lien de la première photo vers la deuxième fait en sorte que la première image qui s’affiche est par défaut la deuxième… Et ce, même en mettant « pos:1, »…
Est-ce que qqn aurait une idée?
problème résolu. J’ai enlevé le paramètre « pos:1,» dans la page où j’affiche ma ‘galerie’, ET dans le fichier jquery.wslide.js
Le seul problème restant à lier ce système de navigation avec les chiffres pour qu’ils se colorent lorsqu’on est sur la photo correspondante.
Je pense mettre les liens (chiffres) dans des et modifier leur couleur avec un .innerhtml dans une fonction que j’appellerai au click image.
Bonjour, je voulais savoir si il y a un moyen de rendre le slide fluide parce que la dans le code javascript l’unité utilisé est le px , est ce qu’il existe un moyen de la rendre en pourcentage par exemple
hello,
mes compliments a toi plug-in.
j’ai mis un swf avec swfobject.embedSWF:
swfobject.embedSWF(« my.swf », « divID », « 200″, « 220″, « 8.0.0″, false, flashvars, params, attributes);
mais il ne fonctionne pas tres bien.
vous donnez moi une solution? merci
mais où es-tu k-ny? reviens!
même pas longtemps, juste le temps d’intégrer un autoplay…
(et les boutons suivant/précédent apparemment très demandés).
Après cette dernière contribution alors tu pourras repartir au Mexique.
pleeeeeeeeeeeeeease…
ils ont tué Kenny !
(NDLR South Park)
Bonjour , Merci pour le plugin c’est super!
En fait j’ai un pbm, deja la page dans la quelle wslide est, utilise des anchors pour faire des effets jquery, du coup, deja, quand je suis a la page http://www.etc.com/#work et puis je clique sur un navigation de wslide, ca change pas de , il fait l’effet, mais il montre le meme qu’avant……
Pour ceux que ça intéresse, j’ai la solution pour le NEXT / PREVIOUS
http://www.siteduzero.com/forum-83-422642-p1-jquery-slide-left.html#r3936479
Et merci à louf404
This is a really good plugin, well done.
If you could just translate everything in English (documentation too) i guess it will be really appreciated from lots of people.
cheers
Bonjour,
merci, très sympa comme module!
j’avais une question pour créer mon propre menu mais je viens de voir qu’il y a les indications également
super!!
can you tell me , how can I make that blug in works auto ,i.e want the pictures to slide themselevs without clicking buttons
Quelqu’un aurait trouvé une solution? en fait on voudrait que l’element se redimensionne en hauteur en fonction de son contenu.
Merci pour ce super plugin..
Tres bon plugin, merci !
Juste une question / un probleme :
Peut-on inclure une sous liste dans une liste animee ? J’ai essaye mais cela bug fortement …
@reinach
Je cherche a faire la meme chose que toi mais je n’ai pas tres bien compris ta methode, pourrai-tu me la detailler un peu stp ?
I’ve been trying to use wSlide and it works great except on ie7 the pages/text disappear after 1 to 4 seconds once the scroll is complete. Tried both vertical and horizontal settings, same problem. Works great in ie8 and Chrome.
You can see the problem here: http://www.ratethatautoshop.com/cmax/index.htm
Not sure if I’m doing anything wrong but I don’t think so.
AJ
The version of ie7 I’m using is: 7.0.5730.13CO
Hi, really nice jquery slider. I’ve been looking for the fading effect and this one will work but there’s one small drawback for what I’m looking for. How would I go about into making the slide automatically scroll upon page load? Will there be something like this implemented in the near future? I hope so. Thanks again.
Bonjour, super plugin ! Pour une débutante je suis assez contente de m’en être sortie, par contre je n’arrive pas à changer la couleur bleue des numéros, j’ai bien ajouté ce code dans mon fichier css, mais je ne connais pas l’attribut pour modifier cette couleur bleue justement …
#ma_liste-menu a.wactive{
padding: 0px 2px;
background: #000000;
color: #eeeeee;
}
Merci !!
C’est pas a:active plutôt que a.wactive ?
@Christophe
non non justement ca fonctionne bien avec a.wactive, les attibuts « padding, background et color » sont bien pris en compte. Ce que je connais pas c’est l’attibut qui permets de changer la couleur bleue des numéros …
Merci
Super Plugin mais est il possible de rendre le défilement automatique (auto slide)
Merci
Merci à vous. Je vais prendre ce projet et installe dans le site.
@Gur:
Where can i find this Super Plugin?
I am looking for a solution for auto slide.
I’m sorry my french isn’t that good.
Forget my first sentence from my prev. post.
Still looking for auto slide..
Thnx!
Bonjour,
comment intégrer ce script dans une page wordpress ?
Merci
Bonjour et bravo pour ce beau plugin. Malheureusement je ne pourrai pas en faire usage, du moi pas dans cet etat la, car mes slides de contenu texte ont une hauteur variable que je ne controle pas. Je charche donc a ajouter un ascenceur vertical pour pouvoir lire chaque slide jusqu’en bas.
Très intéressant comme plug in,
mais il y a t-il possibilité de changer les numéros de défilement par du texte ?
Merci
Hello le Web Inventif…
J’ai été particulièrement séduit par votre script wslide qui permet de faire glisser des listes dans une mise en page.
J’ai essayé de l’intégrer dans un projet Wordpress…
En conservant les paramètres sources du script, ok, on problèmo, ça marche…
mais quand, j’essaye d’intégrer un marker WP, style :
,
(bien que celui là, ne me permette pas d’avoir les titres de ces articles en liste via l’Id de la catégorie)…
Il fait des siennes !!!
Je laisse mon code ci-dessous de mon header.php, sachant que je veux juste récupérer dans cette liste défilante, la liste des titres de mes articles en fonction de leurs catégories…si vous pouvez m’expliquez pourquoi cela ne marche pas…ce serait cool…
En vous souhaitant a tous de bonnes fêtes et bravo au Web Inventif pour son partage des ressources, sa maîtrise des TIc donc aussi sa créativité…
A+. * Le Mulot.
Code :
________________________________________________________________
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="; charset= » />
» Archive du blog
<link rel="stylesheet" href=" » type= »text/css » media= »screen » />
<link rel="alternate" type="application/rss+xml" title=" RSS Feed » href= »" />
<link rel="pingback" href=" » />
$(document).ready(function(){
$(« #liste_defilantes »).wslide({
width: 795,
height: 200,
duration: 2000,
effect: ‘easeOutBounce’
});
});
<a href=" »
title= »Retour vers l’accueil de l’ A.N.M.O.N.M »>Association Nationale des Membres de l’organisation Nationale du Mérite
Cat1 |
Cat2 |
Cat3 |
Test4 |
Test5 |
Test6 |
Test7 |
Test8 |
33333333333333
44444444444444
55555555555555
66666666666666
77777777777777
88888888888888
99999999999999
00000000000000
Re-hello…
Séduit par votre script wslide, je réitère ma demande avec un descro + court.
Je veux uitiliser ce script dans le cadre d’un projet wp…mais quand, j’essaye d’intégrer un marker WP, style :
, cela ne marche pas…
Voilà mon code ci-dessous sachant que je veux juste récupérer dans cette liste défilante, les titres des articles en fonction du id_cat. Si vous pouvez m’expliquez pourquoi cela ne marche pas…ce serait cool…
En vous re-souhaitant une bonne année, bravo au Web Inventif pour sa créativité…
A+. * Le Mulot.
$(document).ready(function(){
$(« #liste_defilantes »).wslide({
width: 795,
height: 200,
duration: 2000,
effect: ‘easeOutBounce’
});
});
Cat1 |
Cat2 |
Cat3 |
Test4 |
Test5 |
Test6 |
Test7 |
Test8 |
33333333333333
44444444444444
55555555555555
66666666666666
77777777777777
88888888888888
99999999999999
00000000000000
Visiblement, il ya une limite de caractère aux commentaires…si il y a un moyen de prendre contact autrement…ce serait cool…Merci à vous et bonne année à tous…Thomas.
Bonjour
c’est possible de remplacer les chiffres de navigation par des images ?
Merci
Re…bonjour…
Je souhaiterai juste utiliser ce script pour l’integrer avec divers options dans mon projet wp :
En 1 -> titres des articles de la cat_id / En 2 -> extrait des desniers news…etc…etc…
Est ce que je pourrais avoir un descro pas a pas svp ? J’ai essayé de vous contacter à plusieurs reprises mais je n’y suis pas arrivé…Cordialement et bonne année…Thomas.
Bonjour,
Comment pourrait-on lancer un défilement automatique ?
Merci.
Bonne journée
Olivier
Tres intéressant mais comme zuck, je voudrais savoir si on peut remplacer les numéros par du texte…merci par avance
Bonjour,
j’ai aussi la même question que plusieurs personnes : comment faire défiler automatiquement les photos dans un ordre pré-féfini ?
Merci
Bravo pour ce boulo !!! Je trouve ça vraiment sympa mais comme zuck et chelmi j’aimerai aussi savoir comment remplacer les chiffres par du texte.
Merci d’avance
Je tiens à te félicité pour ce travail remarquable. Bonne continuation.
Excuseme?Is this system have an control panel?
bonjour et merci pour ce plugin.
petite question pour ceux qui s’y connaissent:
comment faire pour ajouter une navigation »previous/next » sur les images elles mêmes (qqchose comme cela http://nivo.dev7studios.com/)?
merci d’avance.
fred
Merci pour cette prouesse, ça me facilite bien la vie!!!
Bonjour,
J’ai un petit soucis avec ce code :
le javascript se met en marche (le code est exécuté à certains endroits), mais les liens ne marchent pas.
je crois que le soucis est dans l’application du js : mes balises sont dotées d’un attribut rel= »0:0″, et je crois que les ‘0′ devraient être remplacés par des valeurs numériques autres.
J’ai buché sur le code, mais rien n’y fait,
quelqu’un a une idée ?
Salut là
comment ajouter des boutons suivant / précédent
Merci
Bonjour, merci pour ce plugin !
Ça marche bien lorsque j’utilise le fichier jquery.js inclus dans le demo mais je n’arrive pas à le faire fonctionner avec mon fichier jquery 1.4… quelqu’un a t-il réussi ? Est-ce possible ? Je n’ai pas d’erreur mais la liste ne trourne simplement pas, elle reste toujours à la même position (défaut)… Merci !
Bonjour,
Mon site est en construction et je souhaitais mettre du jquery sur mes pages et votre site me plait vraiment c’est super génial.
Mais malheureusement je ne connait pas trop le jquery alors je me demandais si vous pouviez m’aider.
Je vous donne un peu ce que j’ai déjà mis en place, bien sur ça ne fonctionne pas.
Merci beaucoup de votre aide
DANS MA PAGE NAVIGATION
$(document).ready(function(){
$(« #menu_body »).wslide({
width: 400,
height: 250,
autolink: false,
fade: true,
duration: 2000
});
});
Galeries
Partitions
Photos
Vidéos
La presse
Bonjour,
je viens de mettre wslide sur mon site internet, mais je constate un probléme sous ie :/
la première pages s’affiche correctement, mais quand la seconde page ce charge(effet fade) je constate une dégradation de la police aux niveau du titre h1, mais pas sur le texte, voici une capture http://www.apf-entreprises-calais.fr/test/Sans%20titre.JPG
si quelqu’un à la solution…
Hi guys…this is super indeed…and for those who still asking how to change autolinks 1,2,3,4 you find on my site..www.redka3d.com.
i change the autolinks with image or you can change it with button next or previous