Navigation Slider Ajax

Version imprimable

20/12/2012, 14h53
CedriZero

Navigation Slider Ajax

Bonjour,

J'aimerai créer un site avec une navigation dans le genre:
http://www.kikk.be/2012/
http://www.serialcut.com/
C'est à dire une navigation slider avec requete ajax pour charger le contenu de la page suivante.
Malheureusement je ne trouve pas de ressource sur internet pour m'aider, le principe de chargement ajax... pas de problème.
Je suis bloqué pour faire un slide quand la page est chargé.

Si vous avez des idées je suis preneur merci d'avance :)
22/12/2012, 19h01
NoSmoking

Bonjour,

Citation:

Envoyé par CedriZero

Je suis bloqué pour faire un slide quand la page est chargé.

Si vous avez des idées je suis preneur merci d'avance :)

un petit CTR +U et tu as accès aux sources coté client, tu peux toujours jeter un petit oeil à tout cela.
22/12/2012, 21h04
sdamart
Salut, Si l'AJAX ne te pose pas de problème c'est donc la grande question
Comment créer un slider ?
Réponse : jQueryUI.
Le principe c'est qu'ils créé des composants HTML (des divs, des boutons) "à la volée" (I.E document.createElement("div");) leur intègre des événements (addEventListenner, AttachEvent) et remplace l'item séléctionner ($('#item')) par le composant créer.

Il suffit d'utiliser la syntaxe
Code:

1 2 3 4 5 $('#slider').slide({ slide: function( event, ui ) { //Ici ton code ajax } })
Bonne Chance

Merci de votre aide,
j'ai essayé de faire un bout de code avec vos explications mais je crois que je ne fais pas les choses comme il faut...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function() {
	function afficher(data){
		$("#contenu").empty();
		$("#contenu").append(data);
	}
 
	$("#menu a").click (function(){
		$('#slider').slide({
		slide: function( event, ui ) {
						   $.ajax({
						url: "contenu/"+page,
						cache: false,
						success:function(html){
							afficher(html);
						},
						error:function(XMLHttpRequest, textStatus, errorThrown){
							alert(textStatus);
						}
					})
					return false;
					}
		});
	});	
});

26/12/2012, 08h50
SpaceFrog

Code:

$("#contenu").append($(data));

ou alors préciser la dataType de l'ajax ...
ou encore utiliser load()
26/12/2012, 09h38
CedriZero
Ok, mais j'ai du mal à comprendre cette fonction (ici l'appel ajax est appelé une fois le slide lancé non?)
Code:

1 2 3 4 5 $('#slider').slide({ slide: function( event, ui ) { //Ici ton code ajax } })