Scroll horizontal molette souris [résolu]

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)

Bonjour est en css avec overflow-x:scroll;

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...