11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Lecteur du forum depuis pas mal de temps je me décide à m'inscrire sinon je vais finir par m'arracher mes cheveux !
J'ai un site photo assez minimaliste avec gallerie horizontale. Et j'aimerai pouvoir scroller sur mes photos avec la molette de la souris

mon site (désolé je fais pas de pub mais c'est pour bien comprendre le contexte) : www.mikr.fr

pour comprendre exactement ce que je veux, je peux donner un exemple : http://www.violetshortphotography.com/life-and-moments

J'essaye avec jquery avec mousewheel.js mais sans succès :


[code=html]
 <div class="conteneur">
			<img src="img/13b.jpg" alt="13b" title="13b" />
			<img src="img/12.jpg" alt="12" title="12" />
			<img src="img/11b.jpg" alt="11b" title="11b" />
			<img src="img/10b.jpg" alt="10b" title="10b" />
			<img src="img/9.jpg" alt="9" title="9" />
			<img src="img/8.jpg" alt="8" title="8" />
			<img src="img/7b.jpg" alt="7b" title="7b" />
			<img src="img/6b.jpg" alt="6b" title="6b" />
			<img src="img/5b.jpg" alt="5b" title="5b" />
			<img src="img/4b.jpg" alt="4b" title="4b" />
			<img src="img/2.jpg" alt="2" title="2" />
			<img src="img/3.jpg" alt="3" title="3" />
			<img src="img/1.jpg" alt="1" title="1" />
		</div>


	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.mousewheel.js">
$(document).ready(function() {
    $('html, body, *').mousewheel(function(e, delta) {
        this.scrollLeft -= (delta * 40);
        e.preventDefault();
    });
});
</script>






html, body {padding:0;margin:0;height:100%;width:100%;}


.conteneur {

	display: inline-block;
	
	vertical-align:top;
	margin-left: 0%;
margin-top: 220px;
	width: -moz-calc(100% - 0px);
 	width: -webkit-calc(100% - 0px);
 	width: -ms-calc(100% - 0px);
 	width: calc(100% - 0px);
	white-space:nowrap;
		
}.ltIE8 .gauche, .ltIE8 .conteneur {display:inline;}



[/code]
Modifié par cptbartok (07 Nov 2014 - 18:05)
Modérateur
Salut,

Ya un truc chelou dans ton appel js... ca devrait plutot ressembler à :

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.mousewheel.js"></script>
<script>
$(document).ready(function() {
    $('html, body, *').mousewheel(function(e, delta) {
        this.scrollLeft -= (delta * 40);
        e.preventDefault();
    });
});
</script>


Comme dans l'exemple... car la du met du code dans une balise ou tu tente d'importer jquery.mousewheel.js...
Modérateur
Voila, ça marche mieux là. C'était bien ça ? Tu peux le passer en Résolu. Bonne journée Smiley smile
Modifié par _laurent (07 Nov 2014 - 10:28)