wSlide, plugin jquery qui va faire glisser vos listes

30/01/2008

Retour à la page d'accueil du plugin

FAQ

Comment écrire mon propre menu de navigation en dur dans la page?

En fait, tous repose sur l'id de votre liste. On va prendre le cas d'une liste avec une id="ma_liste" (<ul id='ma_liste'> ... </ul>).

1. On désactive le menu automatique en mettant l'option autolink: false

2. Ensuite pour votre menu, il vous faudra écrire un lien pour chaque éléments de votre liste. Les liens s'écrivent de cette manière:

Vous voyez, c'est assez simple, il suffit de faire un lien vers une ancre en précisant l'id de la liste ainsi que l'élément que vous visez. Le tout séparé par un tiret !

Comment personnaliser le menu automatiquement généré d'une liste spécifique ?

Les menus générés sont automatiquement englobés dans une div. Pour une liste avec une id="ma_liste", le menu généré aura la forme suivante:

Donc l'id du menu correspond à l'id de votre liste suivie de "-menu". Donc coté css il faudra viser ça:

#ma_liste-menu{
/* blabla */
}

Comment personnaliser en une fois tous les menus automatiquement généré ?

Vous voudriez que tous vos menus soient stylés de la mème façon, et bien il vous suffit d'appliquer votre style css sur la classe "wslide-menu". Celà affectera tous les menus de la page

.wslide-menu{
/* blabla */
}

Comment personnaliser le conteneur d'un liste spécifique ?

Vos listes sont automatiquement englobées dans une div. Pour une liste avec une id="ma_liste", la div englobante aura la forme suivante:

Donc l'id de la div correspond à l'id de votre liste suivie de "-wrap". Donc coté css il faudra viser ça:

#ma_liste-wrap{
/* blabla */
}

Comment personnaliser tous les conteneurs de liste en une fois ?

Vous voudriez que tous vos conteneurs soient stylés de la mème façon, et bien il vous suffit d'appliquer votre style css sur la classe "wslide-wrap". Celà affectera tous les menus de la page

.wslide-wrap{
/* blabla */
}

Comment personnaliser le numéro de page actif ?

Vous aurez remarquez que dans mes exemples le numéro de l'élément en cours de visualisation et stylé d'une manière différente des autres. Pour faire de même c'est très simple. Chaque lien actif du menu se voit attribuer la classe CSS ".wactive". Donc pour personnaliser les liens actifs d'une liste id="ma_liste":

#ma_liste-menu a.wactive{
padding: 0px 2px;
background: #000000;
color: #eeeeee;
}

Retour à la page d'accueil du plugin

-----

Pages: Page précédente

Articles relatifs

zelda

Bonjour,

Très bon script, rien a redire, mis apart qu’il ne supporte pas les imbrications ( si je fais 2 slide .. .. cela marche, mais par contre si je fais quelque chose comme ca : .., cela pose problème, je m’en sers car j’ai un menu général sur mon site qui va afficher le contenue de chaque li (donc chaque page), mais dans le contenue de ces pages je souhaite rappeler la fonction slide, d’où le problème ..

Si quelqu’un a une solution ça serait vraiment génial.
Julien

Vos prières ont été entendues les amis ! Le plugin est en train d’être mis à jour !

Ce qui est déjà finalisé (mais pas encore dispo, patience): possibilité d’imbriquer des listes, choix du type d’éléments html pour la liste (plus forcement ul li, fonctionne avec tout, genre div a img, etc …), possibilité d’afficher plusieurs « blocs » en même temps (faire glisser les blocs 2 par 2 par exemple), désactivation des CSS pour encore plus de personnalisation.

Ce qui arrive bientôt: défilement automatique (oui oui) avec autopause et autonav (next/prev)

Et a priori on devrait toujours rester sous les 5ko (je vise 4 maxi)

Patience ! 😉
the-dubber

@Julien

Cool !

Je viens de découvrir votre plugin qui est fort intéressent !
Vivement la mise a jour, l’autoplay sera vraiment un plus !

J’ai une question cependant, je n’arrive pas à faire marcher le slide si je place la div qui contiens les ul>li en display:none par défault, (dans le but de faire un show (une apparition du slider) en cliquant sur un bouton).

Y a t-il une astuce ?

Merci d’avance !
Julien

Bon voilà, à priori le défilement automatique est bouclé ! Possibilité d’activer la navigation next/prev et autopause au survol ou pas. Fonctionne bien avec jQuery 1.7. Maintenant faut que je test le bousin sur les autres navigateurs et que je fasse une grosse mise à jour des exemples et de l’article…

@the-dubber ça marche chez moi 😉
the-dubber

@Julien

Pour le display:none j’ai fais quelque test pour comprendre pourquoi il ne marche pas chez moi, je me suis aperçu de ceci :

– ne marche pas si le display:none est définis dans le css ou dans le html
– ne marche pas si le display:none est définis en jquery avant l’apelle de la div par $(« #parent3 »).wslide …
– marche si on le met après le $(« #parent3 »).wslide …
– marche si par défault le display est définis en block, puis qu’on le redéfinis en none en cliquant sur un bouton par exemple (donc une fois le document chargé).

Le problème ne vient peut être que de moi , mais sa me semble un peut étrange.

Vivement la mise a jour =)
Julien
Pour les impatients, voici la beta de wslide 2.0: http://pastie.org/2955277

Nouveautés:

-Ajout de la fonction diaporama (avec choix de la durée, afficher ou pas la navigation prec/suiv, pause au survol)
-Possibilité d’utiliser autre chose que des listes (une simple succession d’images img fonctionnera) et possibilité d’imbriquer des éléments de même famille
-Possibilité de supprimer certain style par défaut pour encore plus de personnalisation
-Possibilité de faire glisser les « blocs » par paquet
-Possibilité d’afficher une légende (attribut « rel » sur éléments enfants, possible de définir un autre type d’attribut genre title ou alt)

Encore 2-3 petites choses vont être changées mais rien d’important. Les exemples et la doc arriveront dans quelques jours. En attendant, le code et documenté (+ ou -) 😉

@the-dubber étrange. J’ai mis display: none en css, puis un simple
```
$("#parent3").show();
```
(dans le $(document).ready évidement) et ça roule. Si t’as une page en ligne pour voir le bug en question …
the-dubber

@Julien
Super !!

Merci beaucoup pour la beta ^^, c’est vraiment du bon boulot, tout est excellent.

J’ai tout essayer pour voir si il y avais des bugs, et j’en ai trouver un ou deux lister ci-dessous :

– si on met l’autoplay à false, il faut que l’autopause le sois aussi, sinon il relance l’autoplay et impossible de faire une pause une fois relancer, donc autoplay:false + autopause:true = problème (d’un coter c’est normal de mettre les deux a false si on arrette l’autoplay ).

– navmenu, c’est pour faire apparaitre le next et prev ? en mode auto il apparait bien, mais en mode « true ou false » il n’apparait pas.

– les imbrications marchent très bien, aucun problème, par contre les attributs : caption,captionOpacity,captionPos j’ai essayer de changer les valeurs mais je n’ai pas remarquer de changement ?

Sinon tout le reste marche niquel, j’ai essayer sur firefox, opéra, safari, ie9, ie8 et chrome, pas de problème.

Par contre ça ne marche pas sous ie7, j’ai une double erreur : « Expected identifier, string or number »,le javascript plante. (d’un côté il commence à ce faire vieux ie7 .. ).

Voila pour les petites erreurs que j’ai trouver, sinon pour mon problème de display:none, pour être précis le slider et le menu apparaisse bien mais c’est le slide qui ne marche pas (si on clique sur 3 dans le menu par exemple, on reste figé sur le 1), sauf en définissan le display:none après $(« #parent3″).wslide .

J’essaierais de mettre en ligne le problème dans les prochains jours pour mieux te montrer, en tout cas merci pour tout.

Bonne soirée
the-dubber

petite edit :

pour le problème du navmenu, le problème est que « true » est de type texte dans ce cas la, donc il faut mettre : if(h.navmenu == « true ») à la place de if(h.navmenu == true)
Julien
@the-dubber Ok 1er bug corrigé (j’ai pas encore testé tous les cas de figures), j’ai mis le code du précédent message à jour.

Edit: Pour navmenu oui ok il faut bien typer le paramètre, amis ça c’est à l’utilisateur de faire attention 🙂

Pour caption, il faut que tu mettes un attribut du genre:
```
<li rel=titre ici">
```
Pas encore testé sous ie7 et 6, j’vais jeter un oeil mais je tient à ce que ça marche sous ie7.
the-dubber

Oui ça n’en sera que mieux si ça marche sur ie7 ^^

Je voulais savoir, crois-tu que ce sois possible de faire une adaptation pour pouvoir définir la taille de la fenêtre (width et height) en « pourcentage » ou en « auto » ?
Julien

@the-dubber Pour height en auto c’est ok (le conteneur prendra la valeur du plus haut des enfants). Le width auto aussi, il prend la largeur dispo du conteneur. Le pourcentage ok, mais par contre il ne sera pas « fluide », donc il prendra la valeur x% a l’affichage de la page mais ne sera pas redimensionné si la taille de la fenêtre change car ça plombe beaucoup trop les perfs !
the-dubber

D’accord merci de ta réponse, donc en auto il est fluide au resize mais pas en pourcentage ? j’ai essayer de mettre width = « auto » pour la largeur, le cadre prend bien la largeur du conteneur, le resize marche, mais par contre le slide ne ce fait plus que verticalement ( la propriété horiz = true ) ne semble pas être pris en compte en « auto ».
Julien

@the-dubber Oui oui en fait le resize fluide ne pourra se faire que sur un style vertical et en « auto ». Si tu veux une valeur en %, à toi d’englober le slider dans une div avec largeur en %. Toutes ces limitations sont provoquées à cause de l’utilisation de padding/margin sur les éléments enfants. Quand on (re)défini la largeur/hauteur des blocs enfants il faut à chaque fois faire le calcul pour chaque bloc (car ils peuvent avoir des valeurs différentes). La solution simple serait que le script englobe chaque bloc dans une div, mais c’est impossible puisque selon le type d’enfant utilisé ça risque de provoquer des erreurs d’affichage (avec les listes par exemple). Donc permettre le resize dynamique dans le sens horizontal entraine le recalcul de toutes les largeurs à chaque mouvement de resize (événement appelé des centaines de fois par seconde lors du resize).

Sinon j’ai:

– ajouté une navigation au clavier
-amélioré le fonctionnement du multibloc (au lieu de multiplier par X les dimensions du conteneur pour faire rentrer les x blocs, il divise les dimensions des blocs pour tout rentrer dans un conteneur de taille normal).
-ajouté la possibilité de créer ses propres boutons de next/prev (comme pour le menu en fait)
-testé sous ie6-7-8-9 et ça à l’air de tourner (sauf la nav prev/next sous ie6 et la nav au clavier uniquement sous ie8 et +)

Me reste donc a résoudre un bug au niveau des classes .wactive en multibloc, permettre le width: auto même en horizontal (mais sans resize du coup) et préparer les styles CSS pour ceux qui veulent personnaliser au mieux le slider. Par contre ça va être difficile de rester sous les 5ko du coup -_-, j’en suis déjà à 5,3 ko (compressé mais pas gzippé)
the-dubber

D’accord merci pour tes réponses précises, je comprend mieux le problème maintenant, et effectivement le resize consomme beaucoup de ressources.

5.3 ko c’est déja bien optimiser je trouve pour toute les fonctions que propose ce plugin ^^

Sinon cool pour les nouvelles fonctionnalités, vivement la sortie finale =)
mike521

Bonjour,
J’ai tester la version beta que j’ai vue dans les commentaries, très bon plugin, fort pratique, j’ai une requête cependant, est-ce qu’on peut faire en sorte que en cliquant sur un bouton (bouton de pause) l’autoplay ce mette en pause ? (comme avec le hover en fait )

Merci
the-dubber

Je reviens après quelque semaine avec nouvelle question =)

J’ai un menu avec diverse page parcouru en jquery (donc pas de rechargement de page).
Sur chaque page j’ai placer un slider Wslide avec le défilement auto du slide.

Ma question : Est-il possible de faire en sorte que lorsque j’arrive sur ma page, le slider concerné revienne en première position avec le temps de l’autoplay remise a zéro (comme quand on fait un next ou prev ..) ?

J’ai réussi à faire en sorte de revenir sur la première position en procédant comme ceci :
var indexpage = idparent // ici je récupère l’id du slider
$(‘a[href= »#parent’+indexpage+’-1″]’).trigger(‘click’); // on arrive en premiere position

Mais le problème est que le slider continue de défiler entre chaque slide (donc si on arrive au moment ou l’autoplay va changé, on ne reste passe directement au slide suivant sans voir le premier).

Voila pour mon problème, en espérant que tu puisse m’aider si tu passe par la ..

Merci d’avance
the-dubber

J’ai réussi, en fait pour que le slider soit remise a zéro il faut faire l’opération ci-dessous côté script js de wslide.

$(« a[name=’navigation’] »).click(function(e) // evenement changement de page
{
clearInterval(thisinterval);
thisinterval = goNext(a.find(‘a.wslide-nav-next’));
});
iAlex

Hi, it does’t work when one in another, for example, parent2 does’t work in parent1…
Alex

Bonjour,

J’ai testé le script, il fonctionne très bien et est très pratique !

Cependant, quand je vais sur ie7, il plante alors que sous firefox, pas de problème.

J’ai lu dans les commentaires qu’il a été testé sur tous les navigateurs IE.

Quelqu’un a-t-il une idée du problème que je pourrai avoir ?

Apparemment c’est au lancement du bout de javascript que j’ai l’erreur :

$(document).ready(
function(){//on attend que la page soit chargée
$(« #defilement »).wslide({

(Erreur à la 3eme ligne)

Après, j’ai la bêta 2.0, peut-être que c’est ça le problème !

Merci :p
Julien

@mike521 ok ça sera ajouté 😉

@Alex oui la béta plante sous ie7, depuis j’ai corrigé ce soucis, une nouvelle béta devrait arriver dans quelques jours
Alex

Ok merci Julien 🙂
mand

Bonjour, j’ai découvert ce plugin récemment et c’est parfait, félicitation.

Je fais un petit UP parce que depuis le mois de janvier plus de nouvelle, est-ce qu’il a une date de release pour la version 2.0 ?
d3im0s

Bonjour,
Voilà, après avoir parcouru l’ensemble des commentaires et tester la plupart des codes.
Est-il possible d’avoir un zip avec les fichiers de la dernière version du plug in (avec autoplay corrigé, etc..)s’il vous plait?

Je ne suis pas très doué en javascript et j’avoue que copier coller un bout de code par un autre puis corriger ceci ou cela, je ne m’en sort plus et plus rien en fonctionne 🙁
Chez moi l’effet de fade se fait bien tout seul mais c’est systématiquement la première en trée qui s’affiche.
D’avance un énorme merci,bien à vous,
d3im0s
pingoographx

Je viens de trouver une faille dans ton script et je ne sais pas si l’erreur vient de moi ou pas mais quand je l’utilise avec du html ou du php ça fonctionne, et dès que je veux mettre du javascript sur la même pas ça le rend incompatible et il arrête de fonctionner. Tu aurais une solution?
Aphax

Salut,

Merci pour ce bel outil 🙂
Je ne sais si tu effectues encore de la maintenance dessus, mais au cas ou :
j’ai tout de même pu remarquer quelques dysfonctionnements lorsqu’on déclare un .wslide() sur un conteneur qui est caché, les coordonnées dans les attributs rel sont toutes à 0 du coup et le slide ne fonctionne pas.
Cela vient du fait que tu te base sur les offsets des éléments au sein du slide-[container]-wrap pour calculer les coordonnées de déplacement, et que ces valeurs sont à 0 je pense lorsque l’élément est invisible.
Pour palier à ça temporairement, j’ai modifié le script de manière à ce que les coordonnées des attributs rel soient calculées directement à partir des valeur des options h.width et h.height renseignées par de dev, par contre cela oblige de faire des conditions supplémentaire pour calculer en fonction de l’orientation du défilement, en tout cas ça pourrait être une piste pour améliorer ton script.

En espérant que cela puisse t’aider !
Olivier

allo, ou est-ce que l’on retrouve les nouvelles versions de ce plugin, car je remarque que les commentaire date du début de l’année 2012, est-ce qu’il y a une nouvelle version?