Forum Moderators: not2easy
I have a ul with lis that hold an image that are floated left. These are thumbnails. I have the uls width set dynamically with PHP by adding all the images and borders up. So the width as of now is about 4080px. This makes a horizontal scroller... perfect!
Now when you click on that image it pops it below in a larger size. That I did with jQuery. However, I want it to pop up centered in the browser window. This wouldn't be hard, but the larger image is fixed so that when you scroll horizontally the image stays put and the thumbnails above scroll through. It's like an iPhoto sort of thing, but I don't want an overflow on it. I want the browser window to have the horizontal scroll bar.
So, how can I have an element that changes sizes (portrait and landscape photos) centered in the browser window no matter how large the browser window is and still be a position:fixed element. Just like a margin 0 auto;
welcome to WebmasterWorld!
I'm not sure if this is a typo, but you have the width set at 4080?
Also without a bit of code, I think it would be difficult for someone to help you out.
there could be a typo in any of your code. PHP, css or (x)html. Not to mention a few other issues as well.
It would help grealty if you could post some of what you have along with your doctype.
4css
Here is the code,
CSS:
.galleria {
list-style: none;
}
.galleria li {
display: block;
width: 80px;
height: 80px;
overflow: hidden;
float: left;
margin: 0 10px 10px 0
}
.galleria li a {
display: none
}
/*.galleria li div {
position: absolute;
display: none;
top: 0;
left: 180px
}*/
.galleria li div img {
cursor: pointer
}
.galleria li.active div img,.galleria li.active div {
display: block
}
.galleria li img.thumb {
cursor: pointer;
top: auto;
left: auto;
display: block;
width: auto;
height: auto
}
.galleria li .caption {
display: block;
padding-top: .5em
}
/* MSIE bug */
* {
margin: 0;
padding: 0
}
body {
padding:0 0 0 0;
background: black;
text-align: center;
color: #bba;
font: 80% helvetica,arial,sans-serif;
}
h1,h2 {
font: bold 80% helvetica,sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
}
a {
opacity: 0.5;
color: #3c97d9;
text-decoration: none;
}
a:hover {
opacity: 1;
}
.caption {
font-style: italic;
color: #887;
}
.wrapper {
position: relative;
}
.gallery {
width:4080px;
position:relative;
margin: 0 auto;
z-index:100;
}.gallery li {
width: 68px;
height: 50px;
margin: 1px 1px;
background:;
}
.gallery li div .caption {
font: italic 0.7em georgia,serif;
}
#main_image {
height: 438px;
width:800px;
padding: 70px 0 0 0;
position:relative;
z-index:1;
}
#main_image img {
margin: 0 auto;
margin-bottom: 10px;
max-height: 550px;
position:fixed;
}
.nav {
padding-top: 15px;
clear: both;
font: 80% helvetica,arial,sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
}
.info {
text-align: left;
width: 700px;
margin: 30px auto;
border-top: 1px dotted #221;
padding-top: 30px;
}
.info p {
margin-top: 1.6em;
}
.footer {
margin: 10px 0 0 0;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Photography</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript">
$(document).ready(function(){
$('.gallery_unstyled').addClass('gallery'); // adds new class name to maintain degradability
$('ul.gallery').galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
// fade in the image & caption
image.css('display','none').fadeIn(1000);
caption.css('display','none').fadeIn(1000);
// fetch the thumbnail container
var _li = thumb.parents('li');
// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);
// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');
// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here
// fetch the thumbnail container
var _li = thumb.parents('li');
// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';
// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('slow',0.3); } // don't fade out if the parent is active
)
}
});
});
</script>
<style media="screen,projection" type="text/css">
</style>
</head>
<body>
<div class="wrapper">
<ul class="gallery_unstyled">
<li><img src="images/photography/full/DSC_0310.jpg"alt="" /></li>
<li><img src="images/photography/full/DSC_0411.jpg"alt="" /></li>
<li><img src="images/photography/full/DSC_0369.jpg"alt="" /></li>
<li><img src="images/photography/full/DSC_0227.jpg"alt="" /></li>
</ul>
<div id="main_image"></div>
</div>
</body>
</html>
Yes, the footer is commented out right now. Does this help at all? Also, the CSS overwrites itself because I am using the CSS provided by galleria and I didn't want to delete it during the testing stages.
[edited by: encyclo at 3:11 pm (utc) on June 18, 2008]
[edit reason] examplified and simplified code [/edit]
