wSlide - tests simples

Code et explications

Voici la configuration de base. Vous devez juste donner la largeur et la hauteur du bloc. Le menu de navigation est auto-généré, il se trouve dans une div avec une id='#parent1-menu' (remplacez le 'parent1' par l'id de votre case.

$('#parent1').wslide({
	width: 450,
	height: 200
});

Code et explications

Dans cet exemple, j'ai précisé la case de départ par défaut et j'ai appliqué un slide horizontal. J'ai aussi appliqué un margin sur mes <li>, ce qui donne un effet de separation entre les cases.

$('#parent2').wslide({
	width: 250,
	height: 250,
	pos: 4,
	horiz: true
});

Code et explications

Ici j'ai crée une map, simplement en precisant le nombre de colonne (col: 4), les cases se repartissent automatiquement sur les lignes suivantes. J'ai aussi déplacé le menu de navigation, simplement en lui indiquant l'emplacement d'une div avec une id='menu3' (autolink: 'menu3') placée au dessus de la boite.

$('#parent3').wslide({
	width: 250,
	height: 300,
	col: 4,
	autolink: 'menu3'
});

Code et explications

Ici j'ai activé l'effet de fading (fade: true), donc inutile dans ce cas de lui donner un effet horizontal ou de map.
J'ai aussi augmenter la durée de l'effet à 2 secondes (duration: 2000)

Et contrairement aux autres exemples, ici j'ai désactivé la génération du menu (autolink: false) au profit d'un menu ecrit en dur dans la page. Indispensable pour se faire un menu bien personnalisé !
Pour creer votre propre menu, vous devez juste construire vos attributs href comme ceci: href="#id_du_bloc-numero_de_case"
Danc dans ce cas-ci: <a href='#parent4-1'>1</a> - <a href='#parent4-2'>2</a> -etc ... jusque 8 (car 8 éléments dans la liste)

$('#parent4').wslide({
	width: 400,
	height: 250,
	autolink: false,
	fade: true,
	duration: 2000
});