defiler de droite vers la gauche au lieu de bas en haut

Version imprimable

bonjour à tous

avec ce code, cela me permet (entre autre) de faire defiler des images de bas vers le haut
mais 'jaimerai le faire de droite vers la gauche

voici le code js

Code:

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
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 pouvait m' aider se serait vraiment sympa, vraiment car je galère vraiment :(

merci...

03/12/2008, 17h58
SpaceFrog

haut bas = top
droit gauche= left ...

Citation:

Envoyé par oceane751

bonjour à tous

avec ce code, cela me permet (entre autre) de faire defiler des images de bas vers le haut
mais 'jaimerai le faire de droite vers la gauche

voici le code js

Code:

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
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 pouvait m' aider se serait vraiment sympa, vraiment car je galère vraiment :(

merci...

Code:

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
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;
  var width = id1.offsetWidth;
 
  id1.style.top = parseInt(id1.offsetTop)-1 + 'px';
  id1.style.left = parseInt(id1.offsetLeft)-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();
});

04/12/2008, 10h18
oceane751

super!!

mais j'ai complement oublié de vous demander aussi un truc
actuellement mes images sont alignées verticalement
et il faudrait qu'elles soient alignées horizontalement

pouvez vous encore m'aider? :oops:

j'ai modifié les height par des width

Code:

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
 
function clip() {
  // width of the banner container
  var contWidth = 300;
  // height of the banner container
  var contHeight = 227;
 
  var id1 = document.getElementById('slideA');
  var id2 = document.getElementById('slideB');
  var width = id1.offsetWidth;
 
  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 ne m'affiche plus rien :?

04/12/2008, 11h55
Saray

Evite d'utiliser le style.left pour avoir la position gauche, utilise plutôt offsetLeft -> car des fois style.left vaut ""

id1.style.left = parseInt(id1.offsetLeft)-1 + 'px';
04/12/2008, 11h56
Saray

Citation:

Envoyé par oceane751

super!!

mais j'ai complement oublié de vous demander aussi un truc
actuellement mes images sont alignées verticalement
et il faudrait qu'elles soient alignées horizontalement

pouvez vous encore m'aider? :oops:

Applique un float left à tes images
04/12/2008, 11h58
Auteur

le_chomeur a réalisé un script qui permet un défilement d'images
04/12/2008, 12h04
oceane751

Citation:

Envoyé par Auteur

le_chomeur a réalisé un script qui permet un défilement d'images

merci ;)
mais le hic est que se code sort d'un plugin.. donc j'ai pas trop le choix de faire avec

Citation:

Envoyé par Saray

Applique un float left à tes images

merci
mais ça ne marche pas

je redonne mon code avec les modifs (au cas où j'ai oublié quelque chose)
code js

Code:

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
 
function clip() {
  // width of the banner container
  var contWidth = 300;
  // height of the banner container
  var contHeight = 300;
 
  var id1 = document.getElementById('slideA');
  var id2 = document.getElementById('slideB');
  var width = id1.offsetWidth;
 
 id1.style.left = parseInt(id1.offsetLeft)-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();
});

puis le code qui appelle mes images :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
<div id="load_img">
		<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;float:left;'><div id='slideA' style='position:absolute;z-index:1;top:0px;left:0px;width:134px;overflow:hidden;float:left;'>";
                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; float:left;' />";
                                }
                                $retour .= "<div id='slideB' style='position:relative;z-index:1;top:0px;left:0px;width:134px;overflow:hidden;float:left;'>";
                        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; float:left; ' />";
                        }
                        $retour .= "</div></div></div>";
                                        echo $retour;
                                ?>
	</div>

voilou