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