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

mms_master
mms_master used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Sr. System Analyst
Commented:
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...
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.

Author

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.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

HainKurtSr. System Analyst

Commented:
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

Author

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

Author

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

Author

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

Dan

Author

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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial