CSS & Javascript - Centre and size divs according to image size

Hi,

I'm trying to create a photo viewer that pops up in the same window (I.e. divs are made visible, not an actual popup) and resizes to fit the picture and text that it is displaying. I want something similar to the one used here http://www.neowin.net/news/new-changes-in-firefox-ui-refresh-screenshots (scroll down to find the thumbnail pictures just above the comments and click them) but with space for text underneath the picture.

One of the main problems I'm having is getting the div to appear in the centre of the screen. I've read hundreds of times that there's no real way to make a div appear in the centre of the browser and that you have to use hacks and tricks etc yet I see hundreds of websites with similar types of photo viewers that appear to have accomplished it... Even after resizing the div to fit a larger image the photo viewer on the link above is still in the centre of the browser...

My second problem (Which to be honest I haven't started to research yet. I've been focussing on getting the div in the centre) is that I don't know how to get the size of the image and give the div that nice "expanding" effect. I know how to change the size of a div with javascript, but in a way that makes the change instant, I don't know how to make it expand slowly.

I've attached a small page below which I've been playing around with. Nothing fancy, just trying to get the above working.

Thanks in advance for your help.

Daniel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title><!--{PAGE_TITLE}--></title>
    <!--{META_TAGS}-->
    <link rel="stylesheet" type="text/css" href="main.css" />
	<script language="JavaScript">
		function ShowPhotoViewer() {			
			document.getElementById('PhotoViewerContainer').style.visibility = 'visible';
			document.getElementById('PhotoViewerImage').src = 'Studio.jpg';
		}
		
		function HidePhotoViewer() {
		
			document.getElementById('PhotoViewerContainer').style.visibility = 'hidden';
		}
		
	</script>
</head>
<body>
    <div id='PageContainer'>
        <div id='PageHeader'>
            <div id='PageHeaderContent'>
            </div>
            <div id='NavContainer'>
                <!--<div class='PushNav'>&nbsp;</div><!--{TOP_NAVIGATION}--><!--<div class='PushNav2'>&nbsp;</div>-->
            </div>
        </div>
        <div id='PageBody'>
            <map name='Studio'>
				<area shape='rect' coords='2, 3, 32, 32' href='javascript:ShowPhotoViewer();' alt='Studio' title='Studio'>
			</map>
			<br />
			<br />
			<div align='center'><img usemap='#Studio' src='Studio.jpg' border='0' width='50' height='50' /></div>
            <div id='PushFooterDown'></div>
			<div id='PhotoViewerContainer'><div id='PhotoViewer'><div align='right'><a href='javascript:HidePhotoViewer();'>Close</a></div><div align='center'><img id='PhotoViewerImage' src='' /></div>Example information about the image above.</div></div>
        </div>
    </div>
    <div id='PageFooter'>
        <!--{FOOTER_CONTENT}-->
    </div>
</body>
</html>

------------------------------------------------------------------------

html, body {
	margin: 0;
	height: 100%;
	background: #333333;
}

#PageContainer {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 750px;
	margin: 0 auto -24px;
	background: #FFFFFF;
}

#PageHeader {
	width: 100%;
	height: 150px;
	background: #0000ff;
}

#PageHeaderContent {
	width: 100%;
	height: 120px;
}

#NavContainer {
	width: 100%;
	height: 30px;
	background: #00ffff;
}

#PageBody {
	clear: both;
	/* Space Holder */
}

#PushFooterDown {
	width: 750px;
	height: 24px;
	margin: 0 auto;
}

#PageFooter {
	width: 750px;
	height: 24px;
	margin: 0 auto;
	background: #00ff00;
}

.PushNav {
	float: left;
	margin: 0 auto;
	background: #ff0000;
}

.PushNav2 {
	float: left;
	margin: 0 auto;
	background: #0000ff;
}

#PhotoViewerContainer {
	visibility: hidden;
	position: absolute;
	top: 0px;
	left:0px;
	width: 100%;
	height: 100%;
	align: center;
}

#PhotoViewer {
	position: absolute;
	margin:25% 45%;
	padding: 10px;
	background: #888888;
}

#PhotoViewer img {
	width: 100px;
	height: 100px;
}

Open in new window

LVL 5
mms_masterAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HainKurtSr. System AnalystCommented:
it may be difficult to do if you start from scratch... why not just use a component made for this?

like this one: http://colorpowered.com/colorbox/

I guess the one you posted uses this too...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
regstratonCommented:
What you are trying to do is not easy and it is possibly good advice to use one that already exists.

However if you want to centre a DIV within another DIV you can do this:

<DIV style="border:1px solid red;">
    <DIV style="border: 1px solid blue; height: 500px; width: 500px; padding: 50px 0; margin-left:auto; margin-right:auto;">
    </DIV>
</DIV>

This is a basic demo for centering a DIV within another DIV. Note the "margin auto", this is the  magic.

Further note that you need to give the inner DIV a width. Or it will always expand to maximum width.
Usually solutions end up using a 3rd DIV to get vertical centering - but that is difficult to get to work across all browsers. and most people resort to using some amount of JavaScript.

0
mms_masterAuthor Commented:
@HainKurt

Thank you I will have a look at that. Maybe I can even have a look at the code to get an idea of how it's done.

@regstraton

I know about using the auto margin. It's the vertical centre that I can't work out. You mentioned a 3rd div for the vertical centring; are you able to give me an example of how this might be done or at least where I might start even if it doesn't work across all browsers?

@both

Is there an actual name for what I am trying to create other than photo viewer? Maybe there are some tutorials out there somewhere even if they are not quite what I am looking for but have similarities.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

HainKurtSr. System AnalystCommented:
you are looking for a nice gallery + some visual effect (and it should be browser compatible)...
don't waste your time and use one already built ;) look at other jQuery plugins if you go with jQuery
0
mms_masterAuthor Commented:
@HainKurt

Agreed and I probably will use the one you linked yesterday. However forgetting the visual effect, it would be nice to know how to centre something vertically for future reference.

Thanks,

Dan
0
mms_masterAuthor Commented:
I have had a play around with ColorBox and have it working fine. What I need to do is add a paragraph of text under the photo on ColorBox. I don't want to do this using the title property because I don't want the tooltip text when hovering over the image to display the paragraph.

How can I do this? I know I may have to alter the CSS slightly to make space for the paragraph.

Thanks,

Dan
0
mms_masterAuthor Commented:
I have solved tha last problem myself. (Adding the paragraph to the ColorBox div)

Dan
0
mms_masterAuthor Commented:
Grade B given because I needed help adding a paragraph of text to the ColorBox div and had no reply.

Thank you for showing me ColorBox.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.