image vertical align - change image source and margin value simultaneously?

**teallach** · 03-14-2010, 08:26 PM

Hi

I'm building an image gallery. My images are all different sizes and I have them centralised using text-align for horizontal and setting the margin-top value for vertical. Each time a new image is shown, I look in an array for the corresponding margin value. It all works fine except in IE, where the old image always takes the new margin value before being replaced by the new image. This makes it appear to move briefly before disappearing.

I've tried setting the containing div display to 'none' while the images swop over, and tried all orders of changing the settings, but I can't get the old image to disappear with its old margin, then the new one to appear with it's new margin. In Firefox the code below works fine:

get("main_image").style.display="none"; //hide the old image
get("main_image").src=''; //remove the old image
get("main_image").src=portfolioDir + array_names[imagePos] + '.jpg'; //get and set the new image
get("main_image").style.paddingTop=array_m_tops[imagePos] + 'px'; //give new image its top padding
get("main_image").style.display="block"; //show the new image

Can anyone advise?

If there's a better way of vertically centralising an image within a div, that would solve it all!

Thanks.

**Josephbm91** · 03-15-2010, 09:14 AM

Originally Posted by teallach

I look in an array for the corresponding margin value....

If there's a better way of vertically centralising an image within a div, that would solve it all!

Thanks.

Since you're storing and retrieving the margins in an array, I can show you how to manually center an image within a div container.

To vertically center the image, just use this equation.

(Height of container - height of image)/2 = Margin Top necessary to vertically center.

So if I have a 400px container and a 280px image:

(400-280)/2=60

Applying margin-top: 60px will vertically center the image. (If you want to vertically and horizontally center, just set the image to display: block and do margin: 60px auto;)

Copy and paste this so you can see some examples using a 50px square.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Manually Vertically Align Images</title>

<style type="text/css">

/*In all these examples, we are centering a 50px by 50px square*/

#wrapper{
width:800px;
margin: 20px auto;}

.btest{border: 1px solid #000000;}

h1{margin: 0px auto; text-align: center;}

	#example1{
	margin: 30px auto;
	width: 600px;
	height: 400px;
	border: 2px solid #000000;}
	
		#example1 img{
		display: block;
		margin: 175px auto; /* (400-50)/2 = 175 */
		}

	#example2{
	margin: 30px auto;
	width: 200px;
	height: 300px;
	border: 2px solid #000000;}
	
		#example2 img{
		display: block;
		margin: 125px auto; /* (300-50)/2 = 125 */
		}
		
	#example3{
	margin: 30px auto;
	width: 400px;
	height: 250px;
	border: 2px solid #000000;}
	
		#example3 img{
		display: block;
		margin: 100px auto; /* (250-50)/2 = 100 */
		}
		
	#example4{
	margin: 30px auto;
	width: 460px;
	height: 120px;
	border: 2px solid #000000;}
	
		#example4 img{
		display: block;
		margin: 35px auto; /* (120-50)/2 = 35 */
		}




</style>
</head>
<body>
	<div id="wrapper">
	<h1>Manually Vertically Center an Image in a Div</h1>
	
	<div id="example1"><img src="http://mcculloughdesigns.com/forums/imagesize/images/50px.jpg" alt="50 by 50px square" /></div>
	<div id="example2"><img src="http://mcculloughdesigns.com/forums/imagesize/images/50px.jpg" alt="50 by 50px square" /></div>
	<div id="example3"><img src="http://mcculloughdesigns.com/forums/imagesize/images/50px.jpg" alt="50 by 50px square" /></div>
	<div id="example4"><img src="http://mcculloughdesigns.com/forums/imagesize/images/50px.jpg" alt="50 by 50px square" /></div>
		
		
		
		
		
		
		
		</div>
</body>
</html>

**vwphillips** · 03-15-2010, 11:52 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
  position:relative;width:200px;height:200px;border:solid black 1px;
}

#tst IMG {
  position:absolute;visibility:hidden;
}

/*]]>*/
</style>

</head>

<body>
<div id="tst" >
<img  src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
<img  src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" />
<img  src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" />
<img  src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" />
</div>
<input type="button" name="" value="Swap 0" onclick="Swap('tst',0);" />
<input type="button" name="" value="Swap 1" onclick="Swap('tst',1);" />
<input type="button" name="" value="Swap 2" onclick="Swap('tst',2);" />
<input type="button" name="" value="Swap 3" onclick="Swap('tst',3);" />
<script type="text/javascript">
/*<![CDATA[*/



function Swap(id,nu){
 var p=document.getElementById(id);
 var imgs=p.getElementsByTagName('IMG');
 if (imgs[nu]){
  if (this.lst){
   this.lst.style.visibility='hidden';
  }
  this.lst=imgs[nu];
  this.lst.style.left=(p.offsetWidth-this.lst.width)/2+'px';
  this.lst.style.top=(p.offsetHeight-this.lst.height)/2+'px';
  this.lst.style.visibility='visible';
 }
}


Swap('tst',0);
/*]]>*/
</script>
</body>

</html>

**teallach** · 03-15-2010, 06:11 PM

Joseph, thanks, but I could do this part already... it is the smooth transition between 2 imagesthat I need,

**teallach** · 03-15-2010, 06:13 PM

Vic, yours looks good. ,I've no time right now but I'll come back to you asap to let u knoe if it worked.

Thanks v much,
Gordon

**teallach** · 03-16-2010, 04:47 PM

Hi again Vic

I've tried yours, but it's no better. I think it works on your page because your images are preloaded, can that be correct? I'm working with >100 images of between 400-600px wide, so I need to load each individually when 'next' is clicked. It's during the loading of the next images that the current image takes on the margin of the next one.

Ah, wait... if there's a way of detecting when the next image has completely loaded, and delaying giving the new margin until then, then that might be the answer...

I'll need to see if that's possible... ideas welcome!

**vwphillips** · 03-16-2010, 06:12 PM

changing the src will not always give a smooth transition

this is why I am suggesting changing the visibility

as the images are large this may be better

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
  position:relative;width:200px;height:200px;border:solid black 1px;
}

#tst IMG {
  position:absolute;left:25px;top:25px;visibility:hidden;
}

/*]]>*/
</style>

</head>

<body>
<div id="tst" >
</div>
<input type="button" name="" value="Swap 0" onclick="Swap('tst',0);" />
<input type="button" name="" value="Swap 1" onclick="Swap('tst',1);" />
<input type="button" name="" value="Swap 2" onclick="Swap('tst',2);" />
<input type="button" name="" value="Swap 3" onclick="Swap('tst',3);" />
<script type="text/javascript">
/*<![CDATA[*/

function Swap(id,nu){
 var p=document.getElementById(id);
 var imgs=p.getElementsByTagName('IMG');
 if (imgs[0]){
  imgs[0].style.visibility='hidden';
 }
 if (imgs[nu]&&imgs[nu].complete&&imgs[nu].width>100){
  if (this.lst){
   this.lst.style.visibility='hidden';
  }
  this.lst=imgs[nu];
  this.lst.style.left=(p.offsetWidth-this.lst.width)/2+'px';
  this.lst.style.top=(p.offsetHeight-this.lst.height)/2+'px';
  this.lst.style.visibility='visible';
 }
}

var ImgAry=['http://www.vicsjavascripts.org.uk/StdImages/One.gif','http://www.vicsjavascripts.org.uk/StdImages/Two.gif','http://www.vicsjavascripts.org.uk/StdImages/Three.gif','http://www.vicsjavascripts.org.uk/StdImages/Four.gif'];

function Load(id,ary){
 var obj=document.getElementById(id);
 for (var img,z0=0;z0<ary.length;z0++){
  img=document.createElement('IMG');
  img.src=ary[z0];
  img.style.visibility=(z0>0?'hidden':'visible');
  obj.appendChild(img);
 }
}

Load('tst',ImgAry);



/*]]>*/
</script>
</body>

</html>

**teallach** · 03-17-2010, 08:51 PM

Hi Vic

Sorry for the delay here. I tried your code but could adapt it to my page. So I eventually went for preloading all the images. That seems to work...

You can see the result here: http://www.ingridvekemans.com/specia...den-test-album

Do say if you've other suggestions!

Regards
Gordon.

Thread: image vertical align - change image source and margin value simultaneously?

Thread Tools

Search Thread

image vertical align - change image source and margin value simultaneously?

Bookmarks

Bookmarks

Posting Permissions