Arriver directement sur le slide num 2 de mon slideshow javascript [Résolu]

steeve.c · 17/10/2011, 08h25

Bonjour,

J'aimerais solliciter votre soutient concernant l'affichage dans un slideshow. En bref, j'ai un slideshow javascript qui me conviens parfaitement, sauf que j'aimerais permettre à l'utilisateur d'arriver directement sur le slide numero 3 par exemple.
(je maîtrise assez bien le php, mais pas vraiment le javascript, d'ou la raison de ce post)

Voici le code javascript du slideshow:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//Configuration
		  var retour = true;
		  var tempsTransition = 1000;
		  var affichePlayPause = false;
		  var lectureAutomatique = false;
		  	var tempsAttente = 6000;
 
		  var icones = new Array();
		  		icones['play'] = 'img/play_slider.png';
		  		icones['pause'] = 'img/pause_slider.png';	
 
		  var currentPosition = 0;
		  var slideWidth = 840;
		  var slides = $('.slide');
		  var numberOfSlides = slides.length;
		  var interval;
		  var lectureEnCours = false;
  // Supprime la scrollbar en JS
  $('#slidesContainer').css('overflow', 'hidden');
 
  // Attribue  #slideInner  à toutes les div .slide
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });
 
  // Longueur de #slideInner égale au total de la longueur de tous les slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
 
  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Précédent</span>')
    .append('<span class="control" id="rightControl">Suivant</span>');
 
 
 
  // Hide left arrow control on first load
  manageControls(currentPosition);
 
  //Crée un écouteur d'évènement de type clic sur les classes .control
  $('.control')
    .bind('click', function(){
 
    // Determine la nouvelle position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
 
	if(currentPosition == numberOfSlides && retour == false ){
		currentPosition--;
		pause();
	}
 
	// Cache ou montre les controles
    manageControls(currentPosition);
    // Fais bouger le slide
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    },tempsTransition);
  });
 
  // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
  function manageControls(position){
    // Cache la fleche "précédent" si on est sur le premier slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides-1 && retour == false){
		$('#rightControl').hide();
	} else {
		$('#rightControl').show();
	}
	if(position == numberOfSlides && retour == true){
		currentPosition = 0;
		 $('#leftControl').hide();
	}
  }
  function suivant(){
	$('#rightControl').click();
	}
  function start() {
  	lectureEnCours = true;
    interval = setInterval(suivant, tempsAttente );
  }
  function pause() {
  	lectureEnCours = false;
   clearInterval(interval);
  }
 
 //Si le diapo est activé 
if(lectureAutomatique == true){
  start();
}
if(affichePlayPause == true){
	$('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
	if(lectureAutomatique == true){
		$('#navDiapo').attr('src',icones['pause']);
	}else{
		$('#navDiapo').attr('src',icones['play']);	
	}
	$('#navDiapo').bind('click', function(){
		if(lectureEnCours == true){
			$(this).attr('src',icones['play']);
			pause();
		}else{
			$(this).attr('src',icones['pause']);
			start();
		}
	});
}
 
 
 
});
</script>

Et voici le code dans ma page php:

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
 
<div id="pageContainer">
  <div id="slideshow">
    <div id="slidesContainer">
     <div class="slide">
     <?php include("kit.php") ;?>
      </div>
 
      <div class="slide">
      <?php include("etapes.php") ;?>
      </div>
 
      <div class="slide">
      <?php include("savoir_faire.php") ;?>
      </div>
    </div>
  </div>
</div>

Donc, comme je le disais, le slideshow fonctionne bien, j'arrive directement sur le premier slide, celui qui includ kit.php.
Et lorsque je clic sur la flèche vers la gauche, je vois bien la suivant, donc etapes.php, ainsi de suite.

Cependant, j'aimerais que dans certaines condition avant d'arriver sur la page, je puisse arriver directement sur le slide 2 ou 3. En utilisant _GET par exemple.

J'ai bien essayé de modifier la variable position dans le script javascript

Code :

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

1
2
3
4
5
6
7
 
var icones = new Array();
icones['play'] = '<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/img/play_slider.png';
icones['pause'] = '<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/img/pause_slider.png';	
 
var currentPosition = <?php if(isset($_GET['posi'])) { echo $_GET['posi']; } else { echo 0;}  ?>;
var slideWidth = 840;

Malheureusement, ça ne fonctionne pas vraiment, j'arrive bien en position 2 par exemple, mais je vois le premier slide, et lorsque je clic la flèche gauche pour aller au slide suivant, je bascule bien au slide 3 directement comme prévu. Le seul problème donc, c'est d'afficher le slide qui correspond a la position lors de l'affichage du premier slide.

J'espère que mon explication n'est pas trop confuse.

Je travail directement sur le serveur d'hebergement de mon client:
http://cluster003.ovh.net/~kitaentr/...hp?page=slide1

Merci d'avance pour votre soutien

SpaceFrog · 17/10/2011, 08h56

que donne le js généré ?

Tu es sur la bonne voie, car c'est bien

Code :

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

 var currentPosition = 0;

qu'il faut modifier

steeve.c · 17/10/2011, 09h23

Citation:

Envoyé par SpaceFrog

que donne le js généré ?

Le Js m'affiche bien le slideshow:
http://cluster003.ovh.net/~kitaentr/...=slide1&posi=2

Donc si je suis sur la bonne voie, je me demande ce qu'il manque pour que la premier slide vue, colle bien avec la position demandée.

Une idée ?

Merci pour vos réponses

steeve.c · 19/10/2011, 09h07

Une personne m'a rectifier le code sur un autre forum, je le post ici au cas certaines personnes aient le même besoin.

Il fallait ajouter :

Code :

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

$('#slideInner').css({marginLeft: slideWidth * (-currentPosition)});

Juste avant la fin, du coup, avec $_GET['posi'], j'indique le numero du slide a afficher.

Voici le code javascript final:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/includ/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//Configuration
		  var retour = true;
		  var tempsTransition = 1000;
		  var affichePlayPause = false;
		  var lectureAutomatique = false;
		  var tempsAttente = 6000;
 
		  var icones = new Array();
		  icones['play'] = '<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/img/play_slider.png';
		  icones['pause'] = '<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/img/pause_slider.png';	
 
		  var currentPosition = <?php if(isset($_GET['posi'])) { echo $_GET['posi']; } else { echo 0;}  ?>;
		  var slideWidth = 840;
		  var slides = $('.slide');
		  var numberOfSlides = slides.length;
		  var interval;
		  var lectureEnCours = false;
  // Supprime la scrollbar en JS
  $('#slidesContainer').css('overflow', 'hidden');
 
  // Attribue  #slideInner  à toutes les div .slide
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });
 
  // Longueur de #slideInner égale au total de la longueur de tous les slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
 
  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Précédent</span>')
    .append('<span class="control" id="rightControl">Suivant</span>');
 
 
 
  // Hide left arrow control on first load
  manageControls(currentPosition);
 
  //Crée un écouteur d'évènement de type clic sur les classes .control
  $('.control')
    .bind('click', function(){
 
    // Determine la nouvelle position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
 
	if(currentPosition == numberOfSlides && retour == false ){
		currentPosition--;
		pause();
	}
 
	// Cache ou montre les controles
    manageControls(currentPosition);
    // Fais bouger le slide
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    },tempsTransition);
  });
 
  // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
  function manageControls(position){
    // Cache la fleche "précédent" si on est sur le premier slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides-1 && retour == false){
		$('#rightControl').hide();
	} else {
		$('#rightControl').show();
	}
	if(position == numberOfSlides && retour == true){
		currentPosition = 0;
		 $('#leftControl').hide();
	}
  }
  function suivant(){
	$('#rightControl').click();
	}
  function start() {
  	lectureEnCours = true;
    interval = setInterval(suivant, tempsAttente );
  }
  function pause() {
  	lectureEnCours = false;
   clearInterval(interval);
  }
 
 //Si le diapo est activé 
if(lectureAutomatique == true){
  start();
}
if(affichePlayPause == true){
	$('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
	if(lectureAutomatique == true){
		$('#navDiapo').attr('src',icones['pause']);
	}else{
		$('#navDiapo').attr('src',icones['play']);	
	}
	$('#navDiapo').bind('click', function(){
		if(lectureEnCours == true){
			$(this).attr('src',icones['play']);
			pause();
		}else{
			$(this).attr('src',icones['pause']);
			start();
		}
	});
}
 
$('#slideInner').css({marginLeft: slideWidth * (-currentPosition)});  
 
});
 
</script>

17/10/2011, 08h56	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 053 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 053 Points : 45 169 Points : 45 169	que donne le js généré ? Tu es sur la bonne voie, car c'est bien Code : Sélectionner tout - Visualiser dans une fenêtre à part var currentPosition = 0; qu'il faut modifier __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email