asked on

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

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

regstraton

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.

mms_master

ASKER

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

HainKurt

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

mms_master

ASKER

@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

mms_master

ASKER

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

mms_master

ASKER

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

Dan

mms_master

ASKER

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.

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

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