11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Jquery slideshow fullpage - centrer image

Salut à tous,

J'ai un petit soucis dans un script que j'essaye de réaliser, mais là je dois dire que ça me dépasse un peu.

En fait je crée un slideshow full page avec une liste d'images l'une à la suite de l'autre. Quand on charge la page la première image se centre. Pour se faire je récupère la largeur du viewport que je divise en deux, ensuite la taille de l'image que je divise également en deux. Je soustrais la moitié de la taille de l'image à la moitié de la taille du viewport et j’obtiens un résultat qui me permet de centrer ma première image (vous m'suivez Smiley ravi ?).

J'aimerai obtenir ce résultat pour le reste des images. Je pensais qu'il « suffirait » de ré-excuter la fonction qui fonctionne bien pour la première image et ensuite additionner les tailles des images précédentes.

Cependant ça ne fonctionne pas, ma démarche est peut être illogique, et je me tourne vers vous en désespoirs de cause car la je sèche.

J'ai commenté la portion de code qui est problématique pour les plus courageux d'entre vous.

Merci d'avance !

Voici la page en question : -www.nicolasgilis.be/test/
Salut Patidou,

Tout d'abord merci de ta réponse, malheureusement je n'ai pas trouvé la solution que je cherche dans les plugins du post que tu m'as linké.

En fait je cherche bien à avoir toutes les images affichées en même temps, dans ceux que j'ai vu il n'y en a systématiquement que une.
Tu te compliques la vie pour rien, il suffit de prendre la position actuelle de la galerie et d'enlever la moitié de la largeur de l'image précédente et la moitié de la largeur de l'image en cours :


/* Author: MyPixel
 */

var hauteurViewport = jQuery(window).height();
var largeurViewport = jQuery(window).width();
var positionTotal = 0;
var pos = 0;

/* définir la taille de l'image selon le viewport et son conteneur */
function redimensionnementImage(){ 
  $('#galerie img').css('height', hauteurViewport);
  
  images = new Array();
  tailleTotalConteneur = 0;
  var j = 0;
  $('#galerie img').each(function(){
    images[j] = $(this).width();
    tailleTotalConteneur += $(this).width();
    j++;
  })
  $('#galerie').css('width', tailleTotalConteneur);
}

/* changer l'image en cour */
function changerImage(){
  $('#galerie .on').removeClass().next().addClass('on');
}

/* taille de l'image en cours */
function tailleImageEnCours(){
  var tailleImage = new Array();
  tailleImage['largeur'] = $('#galerie .on').width();
  tailleImage['hauteur'] = $('#galerie .on').height();
  return tailleImage;
}

/* Slider et mettre l'image au centre */
function centrerImageEnCours() {
  var tailleImage = tailleImageEnCours();
  var positionImageCentre = tailleImage['largeur']/2;
    
  var centreViewport = largeurViewport/2;
  var positionImage = centreViewport - positionImageCentre;
  pos = (parseInt(-positionImage));
   
  $('#galerie').animate({left: positionImage + 'px'}, 1000);
}


function deplacementImage(){
	var x1 = parseInt($('#galerie').css('left'));
	var x2 = $('#galerie .on').prev().width() / 2;
	var x3 = $('#galerie .on').width() / 2;
		
	var xx = x1 - x2 - x3;
		
  $('#galerie').animate({left : xx + 'px'}, 1000);
}

/**** fin portion de code foireuse ****/

function addKeyNavigation()
{
	$(document).bind('keydown', checkKey);
}

function checkKey(e)
{
	e.preventDefault();
	switch (e.keyCode) 
	{
    case 38: // up
      setFocusDown(null);
      break;
    
    case 40: // down
      setFocusUp(null);
      break;
    
    case 37: // left
      scrollToPrev(null);
      break;
        
    case 27: // esc
      hideNavigation(null)
      break;
        
    case 39: // right
      changerImage();
      deplacementImage();
      break;
      
    default:
	}    
}

/** additionner les largeur d'images a chaque fois et le mettre comme right **/

$(function(){
  addKeyNavigation();
  
  /* centrer l'image et les mettre à la hauteur du viewport */
  $('#galerie img').css('height', hauteurViewport);
  centrerImageEnCours();
  
  /* redimensionner les images en fonction du viewport */
  redimensionnementImage(); 
  $(window).resize(function(){ 
    redimensionnementImage(); 
  });
  
  /* passer à l'image suivante */
  $('#galerieWrap .next').click(function(){
    
    changerImage();
    deplacementImage();

  });

})

Modifié par jb_gfx (15 Oct 2012 - 15:13)
Oufti (comme on dit chez nous) mon gars mille merci, tu viens de m'enlever un de c'est poids t'imagine même pas, là, c'est la fête !

Je te remercie mille fois franchement ! merci merci !
Tiens j'ai viré quelques trucs inutiles et j'ai rajouté le bouton précédent :


/**
 * Author: MyPixel
 */
var hauteurViewport = jQuery(window).height();
var largeurViewport = jQuery(window).width();

/* définir la taille de l'image selon le viewport et son conteneur */
function redimensionnementImage() { 
  $('#galerie img').css('height', hauteurViewport);
  
  images = new Array();
  tailleTotalConteneur = 0;
  var j = 0;
  $('#galerie img').each(function(){
    images[j] = $(this).width();
    tailleTotalConteneur += $(this).width();
    j++;
  })
  $('#galerie').css('width', tailleTotalConteneur);
}

function deplacementImage(next) {
  var currentImg = $('#galerie .on');

  var x1 = parseInt($('#galerie').css('left'));
  var x2 = currentImg.width() / 2;

  if (true === next) {
    var imgWidth = currentImg.next().width();
  } else {
    var imgWidth = currentImg.prev().width();  	
  }

  if (null === imgWidth) {
    return false;
  }

  var x3 = imgWidth / 2;

  if (true === next) {
    currentImg.removeClass().next().addClass('on');
    var xx = x1 - x2 - x3;
  } else {
    currentImg.removeClass().prev().addClass('on');
    var xx = x1 + x2 + x3;
  }
    
  $('#galerie').animate({left : xx + 'px'}, 1000);
}

function addKeyNavigation() {
  $(document).bind('keydown', checkKey);
}

function checkKey(e) {
  switch (e.keyCode) 
  {
    case 37: // left
      deplacementImage(false);
      e.preventDefault();
      break;
    case 39: // right
      deplacementImage(true);
      e.preventDefault();
      break;
  }    
}

$(function() {
  addKeyNavigation();
  
  /* centrer l'image et les mettre à la hauteur du viewport */
  redimensionnementImage(); 
  var positionImage = largeurViewport / 2 - $('#galerie .on').width() / 2;
  $('#galerie').animate({left: positionImage + 'px'}, 1000);

  $(window).resize(function(){ 
    redimensionnementImage(); 
  });
  
  /* passer à l'image suivante */
  $('#galerieWrap .next').click(function(e) {
    deplacementImage(true);
    e.preventDefault();
  });

  /* passer à l'image suivante */
  $('#galerieWrap .prev').click(function(e) {
    deplacementImage(false);
    e.preventDefault();
  });
})

Modifié par jb_gfx (15 Oct 2012 - 16:36)
Boum 40 lignes en moins merci énormément, deuxième fois que tu me sauves la vie Smiley langue (la première fois étant avec le parseur php), non non je n'exagère pas lol.

Merci beaucoup, à ma décharge je ne fais du jquery que depuis quelques mois Smiley langue

Merci énormément en tout cas, je ne sais que dire ^^

Que la force soit avec toi !
Sujet clos
Aller à