www.webdeveloper.com
Results 1 to 6 of 6

Thread: Horizontally scroll page with mouse move.

  1. #1
    Join Date
    Feb 2009
    Posts
    124

    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
    Join Date
    Jul 2007
    Posts
    386
    Here is a a rudimentary example. I modified some CSS and added some HTML, and of course, some JavaScript.

    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">
        div#wrap-gallery {
            overflow:hidden;
            position:relative;
            margin:100px 0 0 0;
            height:500px;
        }
        ul#gallery {
            width:10197px;
        	float:left;
        	height:500px;
            position:absolute;
        }
        ul#gallery li{
          display:inline;
        }
        ul#gallery li img{
          float:left;
          height:100&#37;;
        }
        #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(http://www.ttmt.org.uk/forum/gallery/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>
      
      
    <div id="wrap-gallery">
      <ul id="gallery">
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/01.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/01.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/02.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/02.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/03.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/03.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/04.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/04.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/05.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/05.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/06.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/06.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/07.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/07.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/08.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/08.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/09.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/09.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/10.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/10.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/11.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/11.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/12.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/12.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/13.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/13.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/14.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/14.jpg" /></a></li>
        <li><a href="http://www.ttmt.org.uk/forum/gallery/images/15.jpg" class="lightbox_trigger"><img src="http://www.ttmt.org.uk/forum/gallery/images/15.jpg" /></a></li>
      </ul>
    </div>
    
    <div id="status" style="position:absolute;top:0;left:0;"></div>
    
    <script>
    var moveWin = {
        availW: 0,
        galW: 0,
        moveDis: 0,
        
        init: function(){
            this.availW = $(document).width();
            this.galW = $('#gallery').width() - this.availW;
            
            this.moveDis = this.galW / this.availW;
            
            $(document).mousemove(function(e){
                moveWin.displace(e);
            });
        },
        
        displace: function(e){
            var x = e.pageX * moveWin.moveDis;
            $('#gallery').css({left: -x});
            $('#status').html(e.pageX);
        }
    }
    
      jQuery(document).ready(function($) {
        moveWin.init();
      	
        $('.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>
    Please note I added the long URL to the images.

  3. #3
    Join Date
    Feb 2009
    Posts
    124
    Thanks SparoHawk, thats perfect

  4. #4
    Join Date
    Jul 2007
    Posts
    386
    You are welcome.

    I forgot to remove some of the debugging script and HTML.

    You can remove the following line:
    Code:
    <div id="status" style="position:absolute;top:0;left:0;"></div>
    $('#status').html(e.pageX);

  5. #5
    Join Date
    Feb 2009
    Posts
    124
    I thought it was perfect but I have a problem.

    If I resize the browser smaller it doesn't scroll to the end and if the browsers is larger it scroll past the last image.

    Is it possible to have the page stops scrolling at the last image no matter what width the browser is and number of images.

    I would like it to work like this but with the mouse moving instead of scrolling.

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

  6. #6
    Join Date
    Jul 2007
    Posts
    386
    Well, you have to recalculate the availW.

    I didn't put it because I gave you the foundation to keep working on the script. If you'd like me to include that part of the code, let me know.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles