SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

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

  2. #2
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ttmt View Post

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •