Discussion :

[CedriZero]

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

[NoSmoking]

Bonjour,

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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Bonne Chance

[CedriZero]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
					}
		});
	});	
});

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou alors préciser la dataType de l'ajax ...
ou encore utiliser load()

[CedriZero]

Ok, mais j'ai du mal à comprendre cette fonction (ici l'appel ajax est appelé une fois le slide lancé non?)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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