Horizontally scroll page with mouse move

Hi all

I have a simple list of images here that are floated horizontally off the right of the page.

http://www.ttmt.org.uk/forum/gallery/

I can view the image by mouse scrolling left and right.

How can I scroll the page by moving the mouse left and right without scrolling.

So the gallery position will be determined by the position of the mouse on the page.


<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

  <style type="text/css">
    ul#gallery {
    	margin:100px 0 0 0;
    	
    	float:left;
    	height:500px;
    	margin-right:-20000px;
    }
    ul#gallery li{
      display:inline;
    }
    ul#gallery li img{
      float:left;
      height:100%;
    }
    #header{
      position:fixed;
      margin:20px 0 0 20px;
    }
    #header img,
    #header ul#info{
      float:left;
    }
    #header ul#info{
      margin:5px 0 0 50px;
    }
    #header ul#info li{
      color:#aaa;
      font:.95em/1.5em Helvetica, sans-serif;
    }
    #header ul#info li a{
      color:#aaa;
      text-decoration:none;
    }
    #header ul#info li a:hover{
      color:#333;
    }
    #header select{
      margin:20px 0 0 50px;
    }
    #lightbox {
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background:url(overlay.png) repeat;
			text-align:center;
		}
		#lightbox p {
			text-align:right;
			color:#fff;
			margin-right:20px;
			font-size:12px;
		}
		#lightbox img {
			box-shadow:0 0 15px #111;
			-webkit-box-shadow:0 0 15px #111;
			-moz-box-shadow:0 0 15px #111;
			max-width:940px;
		}
		#content img{
		  height:90%;
		  max-width:100%;
		}
  </style>

  </head>

<body>



  <ul id="gallery">
    <li><a href="images/01.jpg" class="lightbox_trigger"><img src="images/01.jpg" /></a></li>
    <li><a href="images/02.jpg" class="lightbox_trigger"><img src="images/02.jpg" /></a></li>
    <li><a href="images/03.jpg" class="lightbox_trigger"><img src="images/03.jpg" /></a></li>
    <li><a href="images/04.jpg" class="lightbox_trigger"><img src="images/04.jpg" /></a></li>
    <li><a href="images/05.jpg" class="lightbox_trigger"><img src="images/05.jpg" /></a></li>
    <li><a href="images/06.jpg" class="lightbox_trigger"><img src="images/06.jpg" /></a></li>
    <li><a href="images/07.jpg" class="lightbox_trigger"><img src="images/07.jpg" /></a></li>
    <li><a href="images/08.jpg" class="lightbox_trigger"><img src="images/08.jpg" /></a></li>
    <li><a href="images/09.jpg" class="lightbox_trigger"><img src="images/09.jpg" /></a></li>
    <li><a href="images/10.jpg" class="lightbox_trigger"><img src="images/10.jpg" /></a></li>
    <li><a href="images/11.jpg" class="lightbox_trigger"><img src="images/11.jpg" /></a></li>
    <li><a href="images/12.jpg" class="lightbox_trigger"><img src="images/12.jpg" /></a></li>
    <li><a href="images/13.jpg" class="lightbox_trigger"><img src="images/13.jpg" /></a></li>
    <li><a href="images/14.jpg" class="lightbox_trigger"><img src="images/14.jpg" /></a></li>
    <li><a href="images/15.jpg" class="lightbox_trigger"><img src="images/15.jpg" /></a></li>
  </ul>


<script>
  jQuery(document).ready(function($) {

  	$('.lightbox_trigger').click(function(e) {

  		e.preventDefault();

  		var image_href = $(this).attr("href");

  		if ($('#lightbox').length > 0) { // #lightbox exists

  			$('#content').html('<img src="' + image_href + '" />');

  			//$('#lightbox').show();
  			
  			$('#lightbox').fadeIn('2000');
  		}

  		else {

  			var lightbox =
  			'<div id="lightbox">' +
  				'<p>Click to close</p>' +
  				'<div id="content">' +
  					'<img src="' + image_href +'" />' +
  				'</div>' +	
  			'</div>';

  			$('body').append(lightbox);
  		}

  	});

  	$('#lightbox').live('click', function() {
  		$('#lightbox').hide();
  	});

  });
  </script>
</body>

</html>



If you mean that literally, the problem is that with a large scroll depth you can get to a point where the slightest mouse movement causes a large scroll displacement, which is not desirable.
Another approach is to scroll only when the cursor is near the edges of the screen. One example here.