Sujet Précédent Sujet Suivant

Défilement d'images à la mollette

Résolu
shivafrodite Messages postés 5 Date d'inscription lundi 28 décembre 2009 Statut Membre Dernière intervention 2 juillet 2010 - 30 juin 2010 à 10:08
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 2 juil. 2010 à 18:32
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

Réponse 1 / 11
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
1 juil. 2010 à 18:34
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
3
Réponse 2 / 11
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
1 juil. 2010 à 19:00
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)
3
Réponse 3 / 11
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
30 juin 2010 à 12:21
tu n'a pas du cherché dans les sources du site

le lien
0
Réponse 4 / 11
shivafrodite Messages postés 5 Date d'inscription lundi 28 décembre 2009 Statut Membre Dernière intervention 2 juillet 2010
30 juin 2010 à 17:10
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
30 juin 2010 à 19:19
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)
0
Réponse 6 / 11
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
30 juin 2010 à 19:30
il y a dans le lien deux sources tu utilise la mauvaise telecharge le zip
0
Réponse 7 / 11
shivafrodite Messages postés 5 Date d'inscription lundi 28 décembre 2009 Statut Membre Dernière intervention 2 juillet 2010
1 juil. 2010 à 09:55
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>
0
Réponse 8 / 11
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
1 juil. 2010 à 12:16
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;
}
0
Réponse 9 / 11
shivafrodite Messages postés 5 Date d'inscription lundi 28 décembre 2009 Statut Membre Dernière intervention 2 juillet 2010
1 juil. 2010 à 14:49
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;
}
0
Réponse 10 / 11
shivafrodite Messages postés 5 Date d'inscription lundi 28 décembre 2009 Statut Membre Dernière intervention 2 juillet 2010
2 juil. 2010 à 10:37
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.
0
Réponse 11 / 11
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
2 juil. 2010 à 18:32
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)
0

Discussions similaires

Scrollbar/Listbox et mollette
DjanGoJack -
DjanGoJack -

2 réponses
Rejoignez-nous