begin process at 2012 05 29 04:52:42
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Défilement d'images à la mollette

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Défilement d'images à la mollette

mercredi 30 juin 2010 à 10:08:02 | Défilement d'images à la mollette

shivafrodite
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 :

Code HTML :
<body>

	<div id="global" > 
	
		<ul id="box">
			
			<li>  <img src="images/diapo1.jpg" alt="diapo1" title="diapo1"/>  </li>
					
			<li>  <img src="images/diapo2.png" alt="diapo2" title="diapo2"/>  </li>
			
			<li>  <img src="images/diapo3.jpg" alt="diapo3" title="diapo3"/>  </li>
			
			<li>  <img src="images/diapo4.png" alt="diapo4" title="diapo4"/>  </li>
			
			<li>  <img src="images/diapo5.png" alt="diapo5" title="diapo5"/>  </li>
				
			<li>  <img src="images/diapo6.png" alt="diapo6" title="diapo6"/>  </li>
			
			<li>  <img src="images/diapo7.png" alt="diapo7" title="diapo7"/>  </li>
			
			<li>  <img src="images/diapo8.png" alt="diapo8" title="diapo8"/>  </li>
			
			<li>  <img src="images/diapo9.png" alt="diapo9" title="diapo9"/>  </li>
			
			<li>  <img src="images/diapo10.png" alt="diapo10" title="diapo10"/>  </li>
			
			<li>  <img src="images/diapo11.png" alt="diapo11" title="diapo11"/>  </li>
			
			<li>  <img src="images/diapo12.png" alt="diapo12" title="diapo12"/>  </li>
			
			<li>  <img src="images/diapo13.png" alt="diapo13" title="diapo13"/>  </li>
			
			<li>  <img src="images/diapo14.png" alt="diapo14" title="diapo14"/>  </li>
			
			<li>  <img src="images/diapo15.png" alt="diapo15" title="diapo15"/>  </li>
			
			<li>  <img src="images/diapo16.png" alt="diapo16" title="diapo16"/>  </li>
			
		</ul>
		
	</div>  <!--  Global -->

</body>


Et le css :

Code HTML :
#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.
mercredi 30 juin 2010 à 12:21:02 | Re : Défilement d'images à la mollette

kazma

Administrateur CodeS-SourceS
tu n'a pas du cherché dans les sources du site

le lien
mercredi 30 juin 2010 à 17:10:30 | Re : Défilement d'images à la mollette

shivafrodite
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?

Code HTML :
<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>

<body>

	<div id="global" > 
	
		<ul id="box" onmouseover='sensa()' onmouseout='anul()'>
			
			<li>  <img src="images/diapo1.jpg" alt="diapo1" title="diapo1"/>  </li>
					
			<li>  <img src="images/diapo2.png" alt="diapo2" title="diapo2"/>  </li>
			
			<li>  <img src="images/diapo3.jpg" alt="diapo3" title="diapo3"/>  </li>
			
			<li>  <img src="images/diapo4.png" alt="diapo4" title="diapo4"/>  </li>



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

Merci de votre aide.
mercredi 30 juin 2010 à 19:19:18 | Re : Défilement d'images à la mollette

PetoleTeam

Membre Club
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)
mercredi 30 juin 2010 à 19:30:21 | Re : Défilement d'images à la mollette

kazma

Administrateur CodeS-SourceS
il y a dans le lien deux sources tu utilise la mauvaise telecharge le zip
jeudi 1 juillet 2010 à 09:55:25 | Re : Défilement d'images à la mollette

shivafrodite
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 <div global> et j'ai essayé avec <ul box> 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:
Code HTML :
<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>
<body>
	<div id="global" > 
		<ul id="box">
			<li>  <img src="images/diapo1.jpg" alt="diapo1" title="diapo1"/>  </li>		
			<li>  <img src="images/diapo2.png" alt="diapo2" title="diapo2"/>  </li>			
			<li>  <img src="images/diapo3.jpg" alt="diapo3" title="diapo3"/>  </li>			
			<li>  <img src="images/diapo4.png" alt="diapo4" title="diapo4"/>  </li>			
			<li>  <img src="images/diapo5.png" alt="diapo5" title="diapo5"/>  </li>



jeudi 1 juillet 2010 à 12:16:35 | Re : Défilement d'images à la mollette

kazma

Administrateur CodeS-SourceS
le div global doit avoir un overflow en hidden utilise comme base le css qui est avec la source

Code :
#global
{
width:80%;
height:100%;
overflow:hidden;
}
jeudi 1 juillet 2010 à 14:49:36 | Re : Défilement d'images à la mollette

shivafrodite
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à).
Code HTML :
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;
}
jeudi 1 juillet 2010 à 18:34:48 | Re : Défilement d'images à la mollette

kazma

Administrateur CodeS-SourceS
Réponse acceptée !
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
jeudi 1 juillet 2010 à 19:00:27 | Re : Défilement d'images à la mollette

PetoleTeam

Membre Club
Réponse acceptée !
Bonjour à tous
comme la dit KAZMA il te faut mettre
Code HTML :
#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
Code HTML :
#box {
  width : 3200px;
}
ou alors le calculer sur l'init et l'ajuster...


;O)

1 2

Cette discussion est classée dans : images, code, html, défilement, mollette

Répondre à ce message

Sujets en rapport avec ce message

PHP -> récupération du code HTML [ par apside ] bonjour,nous avons une application développée en PHP, et nous devons récupérer le code html de la page en cours dans un fichier en local.Or seuls les recuperer le code html d'un mot selecionné [ par sticky97 ] slt tt le monde, g fais un editeur html et je voudrais récupéré le code html ki entour le mot ou une phrase ke g selectionné par exemple si y a une ba récupéré le code html généré par le php [ par matmax ] J'aimerai ouvrir une page qui contient seulement les données essentielles (générées en php). Donc, peut être qu'il est possible de récupérer ( en java block de code html différent selon navigateur. [ par odl2000 ] Bonjour,J'ai fait des recherches, mais j'ai pas trouvé.Pour un besoin specifique, je souhaiterais pouvoir afficher un bout code html different selon l Compilation fichier CHM - IMAGES MANQUANTES [ par 3615jenveux ] Bonjour à tous !Ma question tiens a help WorkShop plus qu'au Java mais il n'y a pas de forum sur HWS.Le problème est en fait très simple mais il faut pb de code ... [ par cristina49 ] bonjour,on m'a demander de corriger des erreurs dans du code html (pb de script dans la barre d'état en bas de l'écran). le problème c'est que je comp afficher/masquer code html [ par eax ] salut je cherche à afficher et à masquer un tableau html en cliquant sur une imagej'utilise actuellement un code php mais c chiant car ça recharge la ecrire dans un le code html avec le script javascript [ par clk ] Masquer le code source "descritption et keywords" dans le HTML [ par phuket ] Bonjour a tous les genis du web,Ma question est que je cherche un moyen pour masquer les code source dans le HTML entre le et le pour les meta keywo débutante-intégrer du javascript dans du html [ par tcia ] bonjour,j'ai trouvé un code source sur ce sitewww.javascriptfr.com/code.aspx?id=15751j'aimerais l'intégrer à du code html. j'ai donc plusieurs questio


Nos sponsors


Sondage...

Comparez les prix


Apple iPhone 4 Noir (16 Go)
Entre 0€ et 0€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,264 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)