title: Horizontally scroll page with mouse move
body: <p>I have a simple list of images here that are floated horizontally off the right of the page.</p>
  
  <p><a href="http://www.ttmt.org.uk/forum/gallery/" rel="nofollow">http://www.ttmt.org.uk/forum/gallery/</a></p>
  
  <p>I can view the image by mouse scrolling left and right.</p>
  
  <p>How can I scroll the page by moving the mouse left and right without scrolling.</p>
  
  <p>So the gallery position will be determined by the position of the mouse on the page.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
        &lt;title&gt;Title of the document&lt;/title&gt;
  
        &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"&gt;
  
        &lt;style type="text/css"&gt;
          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%;
              }
        &lt;/style&gt;
  
        &lt;/head&gt;
  
      &lt;body&gt;
  
  
  
        &lt;ul id="gallery"&gt;
          &lt;li&gt;&lt;a href="images/01.jpg" class="lightbox_trigger"&gt;&lt;img src="images/01.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/02.jpg" class="lightbox_trigger"&gt;&lt;img src="images/02.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/03.jpg" class="lightbox_trigger"&gt;&lt;img src="images/03.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/04.jpg" class="lightbox_trigger"&gt;&lt;img src="images/04.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/05.jpg" class="lightbox_trigger"&gt;&lt;img src="images/05.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/06.jpg" class="lightbox_trigger"&gt;&lt;img src="images/06.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/07.jpg" class="lightbox_trigger"&gt;&lt;img src="images/07.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/08.jpg" class="lightbox_trigger"&gt;&lt;img src="images/08.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/09.jpg" class="lightbox_trigger"&gt;&lt;img src="images/09.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/10.jpg" class="lightbox_trigger"&gt;&lt;img src="images/10.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/11.jpg" class="lightbox_trigger"&gt;&lt;img src="images/11.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/12.jpg" class="lightbox_trigger"&gt;&lt;img src="images/12.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/13.jpg" class="lightbox_trigger"&gt;&lt;img src="images/13.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/14.jpg" class="lightbox_trigger"&gt;&lt;img src="images/14.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="images/15.jpg" class="lightbox_trigger"&gt;&lt;img src="images/15.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
  
      &lt;script&gt;
        jQuery(document).ready(function($) {
  
          $('.lightbox_trigger').click(function(e) {
  
              e.preventDefault();
  
              var image_href = $(this).attr("href");
  
              if ($('#lightbox').length &gt; 0) { // #lightbox exists
  
                  $('#content').html('&lt;img src="' + image_href + '" /&gt;');
  
                  //$('#lightbox').show();
  
                  $('#lightbox').fadeIn('2000');
              }
  
              else { 
  
                  var lightbox = 
                  '&lt;div id="lightbox"&gt;' +
                      '&lt;p&gt;Click to close&lt;/p&gt;' +
                      '&lt;div id="content"&gt;' + 
                          '&lt;img src="' + image_href +'" /&gt;' +
                      '&lt;/div&gt;' +  
                  '&lt;/div&gt;';
  
                  $('body').append(lightbox);
              }
  
          });
  
          $('#lightbox').live('click', function() { 
              $('#lightbox').hide();
          });
  
        });
        &lt;/script&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>