PDA

View Full Version : 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
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.




<!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
<!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


<!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/specials/hidden-test-album

Do say if you've other suggestions!

Regards
Gordon.