{Résolu} [Jquery] Slideshow

Bonjour à tous

Désolé si le titre n'est pas plus précis, mais mon soucis me paraît complexe...
J'ai développé un petit port folio sans prétention, dans lequel j'ai une page index.php contenant mes différentes pages que j'affiche avec des includes et selon les paramètres passés dans l'url.
Jusque là, tout fonctionne.
J'ai une zone "galerie" dans laquelle on navigue à l'aide d'un slider-menu en Jquery utilisant le script de Six Revision.
J'ai dû l'adapter légèrement pour ma convenance : mise en position verticale et affichage de 5 images (qui sont liées à une page).
Le problème qui se pose est le suivant :
Lorsque l'on clique sur une des 5 premières images, pas de problème. C'est lorsque l'on change la position du slider, j'aimerais que la position soit retenue, afin de ne pas être obligé de repartir du début (position initiale) car la page est rechargée à chaque fois....

J'avais pensé à un passage de paramètre dans l'url, mais comment le faire parvenir au slider ?
Mes connaissances en jquery et javascript sont très basiques

Si vous pouviez m'aider, ce serait sympa....
Merci

Voici le code du script (modifié):

$(document).ready(function(){
	//Configuration
		  var retour = false;
		  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 slideHeight = 85;
		  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',
      'height' : slideHeight
    });

  // Longueur de #slideInner égale au total de la longueur de tous les slides
  $('#slideInner').css('height', slideHeight * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<div class="control" id="upControl"></div>')
    .append('<div class="control" id="downControl"></div>');


  
  // 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(){
	.bind('click', function(){
		
    // Determine la nouvelle position
	currentPosition = ($(this).attr('id')=='downControl') ? currentPosition+1 : currentPosition-1;
    
	if(currentPosition==numberOfSlides-4 && retour==false ){
		currentPosition--;
		pause();
	}
	
	// Cache ou montre les controles
    // Fais bouger le slide
    $('#slideInner').animate({
      'marginTop' : slideHeight*(-currentPosition)
    },tempsTransition);
	  manageControls(currentPosition);

  });

  // 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){ $('#upControl').hide() } else{ $('#upControl').show()}
	// Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position == numberOfSlides-5 && retour == false){
		$('#downControl').hide() } else {
		$('#downControl').show()}
	if(position == numberOfSlides-4 && retour == true){
		currentPosition = 0;
		 $('#upControl').hide();
		}
	}
	function suivant(){
	$('#downControl').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();
		}
		});
	}
});

Modifié par hamlet (08 Sep 2009 - 15:28)

Bonjour....
(je suis extrêmement confus pour ce manque de politesse qui ne me ressemble absolument pas... )
Comme j'ai dû réécrire plusieurs fois mon message car il ne me paraissait pas assez clair, cela a dû également passer à la trappe...

PS: Ce qui est bizarre, c'est que lors de la rédaction de mon premier message, le bouton "Prévisualiser" n'était pas affiché alors que pour celui-ci, oui

Hello,

Il existe plusieurs manières assez simple de récupérer des variables de l'url dans js.

Ce que je préfère personnellement c'est de faire un écho de la variable avec php dans le js (en créant un fichier du style monscript.js.php si besoin).

Tu peux aussi récupérer les variables avec document.location.href et des regex mais je trouve ça plus compliqué et moins "sûr".

Salut,
Tu pourrais me montrer un exemple avec du code, SVP ?
Je pense que ce serait plus clair pour moi

Edit : Bon, j'ai réussi à me dépatouiller.... Merci à toi Skoua pour m'avoir mis sur la voix...
En fait, pour afficher l'image correspondant à la page en cours, j'ai initialisé la hauteur de marginTop de #slideinner par rapport au currentPosition, que j'ai calculé dans mon index.php à l'aide de l'astuce de Skoua...

Comme ceci
- index.php :

 currentPosition = 
<?php if ($page >0) {
    if ($page <6) {
      echo ($page-1);
    } else {
      echo "5";
    }
}
?>;

slider.js :

  // Positionnement des sliders au chargement...
  $('#slideInner').css('marginTop', slideHeight*(-currentPosition));

Modifié par hamlet (08 Sep 2009 - 15:28)