aligner les images horizontalement

Question

bonjour à tous


avec le code qui suit, mes images defilent de façon verticale


mais je voudrais que ces images défilent horizontalement


voici le code : 

function clip() {
  // width of the banner container
  var contWidth = 134;
  // height of the banner container
  var contHeight = 227;


  var id1 = document.getElementById('slideA');
  var id2 = document.getElementById('slideB');
  var height = id1.offsetHeight;


  id1.style.top = parseInt(id1.style.top)-1 + 'px';


  document.getElementById('slideCont').style.height = contHeight + "px";
  document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
  id2.style.display = '';
  if(parseFloat(id1.style.top) == -(height/2)) {
    id1.style.top = '0px';
  }
  setTimeout(clip,50)
}


function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}


addLoadEvent(function() {
  clip();
});



si quelqu'un pourrait m'aider ce serait très sympa

cs_bultez · Answer

bonjour,
pourquoi ne pas utiliser la balise marquee ?
elle est faite pour ça, se paramètre en html.
2 ordres javascript ( uniquement si on le désire : balise_marquee.start() et balise_marquee.stop() )
Cordialement          Bul [mon Site] [M'écrire]

cs_oceane751 · Answer

oui je me doute bien que le marquee est plus simpe  mais ce code js est issu d'un plugin.. je suis donc obligé de m'en tenir à cela et trouver une solution afin que ça m'affiche mes images horizontalement

cs_bultez · Answer

dommage pour toi ( mais y'a toujours moyen normalement ! )
si tu y tiens à tout prix :
remplace les top par left et les height par width
( en plus probablement des limites 134 et 227 )
ça ne devrait pas être loin....
          Bul [mon Site] [M'écrire]

cs_oceane751 · Answer

en fait j'ai fais ça comme tu me dis

function clip() {
  // width of the banner container
  var contWidth = 227;
  // height of the banner container
  var contHeight = 134;


  var id1 = document.getElementById('slideA');
  var id2 = document.getElementById('slideB');
  var width = id1.offsetwidth;


 // parseInt(id1.style.top)+1 pour defilement de haut vers le bas
  id1.style.left = parseInt(id1.style.left)-1 + 'px';


  document.getElementById('slideCont').style.width = contwidth + "px";
  document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
  id2.style.display = '';
  if(parseFloat(id1.style.left) == -(width/2)) {
    id1.style.left = '0px';
  }
  setTimeout(clip,50)
}


function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}


addLoadEvent(function() {
  clip();
});

mais ça me double les 3 images et  il n'y a plus de defilement

cs_bultez · Answer

et le html ? qu'on puisse tester ? sinon, on va faire et ça ne correspondra pas !
et ça ne baignera pas...
( slideA, slideB + comment y sont mises les images....
  pas 26589658 lignes ! le nécessaire et pas plus !
  sinon, ça décourage )
          Bul [mon Site] [M'écrire]

cs_oceane751 · Answer

le soucis est que c'est un plugin spip (CMS) les images sont stockées dans un dossier mais je pense que tu peux toujours tester ça c'est le code que j'insere dans ma page : banner.js, c'est le js donné en debut de post

cs_bultez · Answer

doublées ? ça me semble normal !

 for ($i = 1;is_file("flash_img/img".$i.".jpg"); $i++)
 {    $retour .= "";    }

c'est fait 2 fois !

ensuite tu as des erreurs en javascript  !
contwidth par exemple... connais pas
et tu es sûre de      style.clip = 'rect(auto... ?

pas regardé plus loin pour le moment, et :
Chrome
, controler la page actuelle
Options pour les développeurs
Console Javascript, ----
FireFox
, regarder la "console d'erreurs"
Outils / Console d'erreurs
et mieux  : télécharger mon Site] [M'écrire]

cs_bultez · Answer

j'ai oublié d'jouter que les tailles sont probablement à modifier,
que les img passeront à la ligne si on ne met pas style="display:inline" par exemple...
          Bul [mon Site] [M'écrire]

cs_oceane751 · Answer

re! (apres un bon bout de temps, je sais)
je m'y suis remis et c'est vraiment le bordel
le changement de top par left c'est ok
mais width par height, ça ne me defile plus rien

contwidth c'est une variable var contWidth = 227;

voilou j'en suis toujours au même point...

Aligner les images horizontalement

9 réponses

Votre réponse

Discussions similaires