Défilement d'images à la mollette [Résolu]

Signaler
Messages postés
5
Date d'inscription
lundi 28 décembre 2009
Statut
Membre
Dernière intervention
2 juillet 2010
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour,

Je créé actuellement une galerie d'images. La page web est à l'horizontal. Les images sont donc placées dans une liste à puce mise à l'horizontal grâce au css.
Je souhaiterais que l'on puisse défiler d'images en images avec la roulette. Comment puis-je faire ca?
Je n'ai pas trouvé la fonction javascript qui permettrait de faire ça.

Voici mon code html :




 



<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>




  <!--  Global -->




Et le css :

#global
{
width: 16500px;
height:  100%;
}

#box
{
border : 0 ;
margin-top: 30px ;
margin-left: 70px;
padding : 6px ;
}

#box li
{ 
list-style : none ;
width : 900px ; 
height : 600px ;
float : left ;
padding-right: 100px;
}



Si quelqu'un a une petite idée, ou un élément de réponse à me donner ce serait sympa. Cela fait un moment que je bloque dessus.

Merci de votre aide.

11 réponses

Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
96
j'ai fait quelques teste avec des li et le problème c'est qu'avec des liste les image ne reste pas en ligne des que la page est rempli d'image il y a un saut de ligne ,a moins d'une solution en css que je n'ai pas trouvé il serait preferable d'utiliser un tableau plutot que des liste
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour à tous
comme la dit KAZMA il te faut mettre
#global{
  width : 80%;
  height : 100%;
  overflow : hidden;
}
c'est impératif de mettre une largeur pour qu'il y ait scroll...

dans un deuxième temps il te faut également mettre une largeur à box, sinon par défaut il remplira le DIV contenant puis passera à la ligne...

donc il te faut au minimum mettre
#box {
  width : 3200px;
}
ou alors le calculer sur l'init et l'ajuster...


;O)
Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
96
tu n'a pas du cherché dans les sources du site

le lien
Messages postés
5
Date d'inscription
lundi 28 décembre 2009
Statut
Membre
Dernière intervention
2 juillet 2010

Merci du lien, j'avais effectivement vu ce script.

Débutante en javascript, j'aurais besoin d'aide pour le corriger, parce-que ça ne marche pas chez moi.
Ou est mon erreur?

<script type="text/javascript">
 function sensa()
{
 var clic=document.getElementById('box')
 var oml=(clic.offsetLeft+(clic.offsetWidth/2))-setX
 clic.scrollLeft=clic.scrollLeft-(oml/10);
 oxo=setTimeout(sensa,50)
}

 function anul()
{
 clearTimeout(oxo)
}
</script>	

</head>




 



<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>



La console d'erreur m'indique que setX et oxo are not defined...

Merci de votre aide.
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
Je souhaiterais que l'on puisse défiler d'images en images avec la roulette.
merci de ne pas oublier les touches de direction...

oxo quézako ?

si c'est le timer du setTimeout, à la lecture du code, il est préférable
1/ qu'il soit déclaré en variable globale, avec le fameux var, c'est pas indispensable, mais autant prendre tout de suite les bonnes habitudes...
2/ de tester son état avant de le scratcher, même si clearTimeout ne plante pas si il est null, encore une bonne habitude...
3/ de lui donner un vrai nom de variable, par exemple iTimer...

pour finir manque la déclaration de setX

;O)
Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
96
il y a dans le lien deux sources tu utilise la mauvaise telecharge le zip
Messages postés
5
Date d'inscription
lundi 28 décembre 2009
Statut
Membre
Dernière intervention
2 juillet 2010

Merci pour vos réponses.

J'ai utilisé le bon script (normalement)mais cela ne marche pas.
Aucune erreur dans la console.

Est-ce parce-que j'utilise une liste à puce plutôt qu'un tableau?
La fonction n'est pas appelée dans le body est-ce que ça vient de là?
J'ai essayé en affectant la variable à ma
et j'ai essayé avec mais rien n'y fait.
Désolé de ma nullité mais j'en suis au début de mon apprentissage et c'est pas évident...

Voila le code:
<script type="text/javascript">

function deplace(e){

var delta = 0;
delta =((e.wheelDelta) ? e.wheelDelta/120 : -e.detail/3)
var val=((delta<0) ? 100 : -100)
document.getElementById('global').scrollLeft=document.getElementById('global').scrollLeft+val
}

function selecte(ev){
(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : ev.preventDefault();
}

function init(){

var adi=document.getElementById('global')
if(navigator.appName.substring(0,5)=="Micro"){
adi.attachEvent('onmousewheel',deplace);
adi.attachEvent('onmousewheel', selecte)
}
else{
var elmouse=((navigator.userAgent.indexOf("Firefox") != -1) ? 'DOMMouseScroll' : 'mousewheel')
adi.addEventListener(elmouse, deplace, false);
adi.addEventListener(elmouse, selecte, false)
}
}
onload=init	
</script>
</head>


 

<li>    </li>		
<li>    </li>			
<li>    </li>			
<li>    </li>			
<li>    </li>
Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
96
le div global doit avoir un overflow en hidden utilise comme base le css qui est avec la source

#global
{
width:80%;
height:100%;
overflow:hidden;
}
Messages postés
5
Date d'inscription
lundi 28 décembre 2009
Statut
Membre
Dernière intervention
2 juillet 2010

Non, toujours pas même avec overflow:hidden

Je suis obligée de mettre mon width en % pour que la liste soit à l'horizontale.

Voici mon css (si ça vient de là).
body
{
margin: 0;
font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
font-size: 12px;
line-height: 1.50; 
color: black;
background: url(images/back.png) repeat fixed;
}	

#global
{
width: 16500px;
height:  100%;
overflow: hidden;
}

#box
{
border : 0 ;
margin-top: 30px ;
margin-left: 70px;
padding : 6px ;
}

#box li
{ 
list-style : none ;
width : 900px ; 
height : 600px ;
float : left ;
padding-right: 100px;
}


Messages postés
5
Date d'inscription
lundi 28 décembre 2009
Statut
Membre
Dernière intervention
2 juillet 2010

Yeahhhhhhhh , ça fonctionne.

Effectivement, il fallait que ce soit un tableau, ça ne marche pas avec des listes.

Merci beaucoup pour votre aide (et votre patience...!).

Merci.
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
Effectivement, il fallait que ce soit un tableau, ça ne marche pas avec des listes.
FAUX

cela fonctionne avec bien d'autres structure,

  

    
    
  


ou encore

  
    <li></li>
    <li></li>
  

mais dans tous les cas il IMPORTE que l'élément "box" est une width définie, dans le CSS ou après affectation suite à calcul...

D'aucun te dirons que la méthode avec LI ne s'impose pas dans ce cas, que la méthode TABLE ne sert pas à cela...mais cela n'est pas grave à comparer au nombre de chose détournée de leur usage initial en ce bas monde...
;O)