Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stop page scrolling in horizontal gallery.

    Stop page scrolling in horizontal gallery.

    Hi all

    I have this simple demo here to illustrate my problem.

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

    It's a list of images float horizontally to the left and a logo above the gallery.

    When you scroll to the right I would like the logo to stay in the same position. To do this
    I have set the position to fixed.

    Because the number of images in the gallery might change I have set the width of container holding the
    images really high so it will cover the width of the image.

    If you scroll to the right to continues to scroll past the last image.

    If I remove the position:fixed from the logo and don't float the images left the page stops scrolling at the last image
    but the logo is no longer in a fixed position above.

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

    How can I have the logo in a fixed position above the gallery and stop the page scrolling at the last image.

    Thanks in advance for any help.

    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{
          width:30000px;
          margin:80px 0 0 0;
          float:left;
        }
        ul li{
          display:inline;
        }
        ul li img{
          float:left;
          opacity:0.6;
        }
        ul li img:hover{
          opacity:1;
        }
        #header{
          position:fixed;
        }
        #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 25px #111;
    			-webkit-box-shadow:0 0 25px #111;
    			-moz-box-shadow:0 0 25px #111;
    			max-width:940px;
    		}
    		#content img{
    		  height:80%;
    		  max-width:100%;
    		}
      </style>
      
      </head>
      
    <body>
      
      <div id="header">
        <ul>
          <li><img src="images/logo.gif" alt="" /></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      
      <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
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    I haven't tried this, but it may work to replace the gallery properties with
    Code:
    #gallery{white-space:nowrap;}
    and remove the ul/li tags from around the images. Then

    Code:
    <div id="gallery">
    <a...><img...></a><a...><img...></a><a...><img...></a><a...><img...></a><!--et cetera-->
    </div>
    Will
    Numerology API for apps - Facebook, iPad, mobile phones. No charge to use API. [info]


  •  

    Posting Permissions

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