Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Sujet : aligner les images horizontalement [ JavaScript Orienté objet (POO) / Function & Méthodes ] (oceane751)

jeudi 23 octobre 2008 à 11:23:22 | aligner les images horizontalement

oceane751

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 :
[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();
});
[/code]

si quelqu'un pourrait m'aider ce serait très sympa


jeudi 23 octobre 2008 à 12:00:11 | Re : aligner les images horizontalement

bultez

Membre Club
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]         


jeudi 23 octobre 2008 à 12:05:48 | Re : aligner les images horizontalement

oceane751

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

jeudi 23 octobre 2008 à 12:19:14 | Re : aligner les images horizontalement

bultez

Membre Club
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]         


jeudi 23 octobre 2008 à 13:01:06 | Re : aligner les images horizontalement

oceane751

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


jeudi 23 octobre 2008 à 13:39:27 | Re : aligner les images horizontalement

bultez

Membre Club
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]          


jeudi 23 octobre 2008 à 13:45:02 | Re : aligner les images horizontalement

oceane751


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 :

<script type="text/javascript" src="banner.js"></script>
                     <?php
                      $retour = "<div id='slideCont' style='position:relative;z-index:1;width:134px;left:5px;overflow:hidden;'>
                                                                                        <div id='slideA' style='position:absolute;z-index:1;top:0px;left:0px;width:134px;overflow:hidden;'>";
                      for ($i = 1;is_file("flash_img/img".$i.".jpg"); $i++)
                      {
                       $retour .= "<img src=\"flash_img/img".$i.".jpg\" style=' align: center; margin-top: 15px;' />";
                      }
                      $retour .= "<div id='slideB' style='position:relative;z-index:1;top:0px;left:0px;width:134px;overflow:hidden;'>";
                      for ($i = 1;is_file("flash_img/img".$i.".jpg"); $i++)
                      {
                       $retour .= "<img src=\"flash_img/img".$i.".jpg\" style='align: center; margin-top: 15px;' />";
                      }
                      $retour .= "</div></div></div>";
                      echo $retour;
                     ?>
                    </div>

banner.js, c'est le js donné en debut de post

jeudi 23 octobre 2008 à 14:08:00 | Re : aligner les images horizontalement

bultez

Membre Club

doublées ? ça me semble normal !

 for ($i = 1;is_file("flash_img/img".$i.".jpg"); $i++)
 {    $retour .= "<img src=\"flash_img/img".$i.".jpg\" style=' align: center; margin-top: 15px;' />";    }

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 FireBug
Internet
Explorer
activer le deboggage : Outils/options Internet/Avancés
dans la liste, sous "Navigation" : décocher
o Afficher une notification de chaque erreur de script
o Désactiver le débogage de Scripts (Internet Explorer)
et mieux : télécharger le Debogger IE
voir aussi : DebugBar et Companion JS
K-Meleon
regarder la "console d'erreurs"
Outils / Console d'erreurs
Opera
regarder la "console d'erreurs"
Outils / Avancé / Console d'erreurs
Safari
regarder Debug / Show JavaScript Console
° modifier Fichier Preferences.plist situé dans le
répertoire : Support:\Documents and Settings\utilisateur
\Application Data\Apple Computer\Safari\
y ajouter <key>IncludeDebugMenu</key>
<true/>

c'est indispensable lors des mises au point...

          Bul [mon Site] [M'écrire]         


jeudi 23 octobre 2008 à 14:17:06 | Re : aligner les images horizontalement

bultez

Membre Club
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]         


jeudi 4 décembre 2008 à 11:07:44 | Re : aligner les images horizontalement

oceane751

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...




Cette discussion est classé dans : images, function, style, var, id1


Répondre à ce message

Sujets en rapport avec ce message

défilement image veticalement [ par sAchAttouille ] Salut à tous,bon dabord je suis pas un fort utilisateur de forum sauf cas extreme pour trouver des astuces bout de codes sinon Niet !Je suis pas un fo defiler de droite vers la gauche au lieu de bas en haut [ par oceane751 ] bonjour à tousavec ce code, cela me permet (entre autre) de faire defiler des images de bas vers le hautmais 'jaimerai le faire de droite vers la gauc Compte à rebours [ par kopierreko ] Bonjour tout le monde,J'ai récupéré un script d'un compte à rebours que j'ai adapté à ma situation et je voudrais savoir comment je peux rediriger ver document.images.src qui ne fonctionne pas sous IE [ par MrChrist ] Bonjour, je travaille présentement sur une boutique virtuelle... Chaque item a une photo principale et plusieurs thumbnails, je veux que la photo prin Positionnement d'un élément dans la page [ par ov3rdoze ] Bonjour à tousJe suis en train de mettre en place une galerie photo. Les images sont listées dans un tableau en petit, et sont affichées en grand dans Problème de cookie [ par molko13 ] Bonsoir à tous,Cela fait plusieurs jours que je me casse les dents sur la gestion d'un cookie qui serait à terme utilisé pour gérer l'affichage ou de Javascript & XHTML Strict [ par plasticism ] Bonjour, je sèche depuis presque 2 jours sur ce script tout bête, adapté d'une source que j'ai pompé je-ne-sais-plus-où... Il est sensé afficher une " intégration du service recherch imagerie a mon site [ par zouhair07 ] Bonjourje suis un etudiant et jai un tp urgent a faire. ce tp c'est d'integrer le service yahoo api recherch des images a un site via ajax json javasc evenement OnMouseOver sur des images [ par zatox ] bonjour à tous, pour donner un peu plus de vie a mon site, j'aimerai utiliser l'evenement OnmouseOver sur certaines des images pour en changer la coul onclick desactiver la fonction onemouseover [ par demnatis ] Bonjour a tous,je n'ai trouvé rien de precis concernant le script que je souhaite réaliser: ni sur ce site, ni sur google.Je cherche a desactiver la f


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,764 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.