[gordo]

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.

[Wickham]

Quote

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

There is another method, but I think it would have the same result.
Using CSS you can center vertically. The containing div needs a height suitable for your biggest image and also needs position: relative.

Each image needs position: absolute; top: 50%; height: ??px; margin-top: -??px; where the negative margin-top is always half the image height:-

#container { position: relative; width: 530px; height: 200px; margin: auto; }
.image { position: absolute; top: 50%; left: 50%; width: 300px; height: 100px; margin-top: -50px; margin-left: -150px; }

<div id="container">
<img class="image" src="photo1" alt="Photo 1"/>
</div> 

See item 5 here: http://www.wickham43...nteringdivs.php

How you code that in javascript or PHP is beyond my capabilities. It would have to get the height of an image and sett the negative margin-top at half.

[gordo]

Wickhan, thanks v much. I've no time this minute to try it but I'll let u know asap if it worked...

[gordo]

hi

you were correct, it gave the same result. The only way to stop the image jumping in ie, as far as I can see, is to preload them all.

cheers

[craftygeek]

A different approach...

If you're using php you could write a function to create a separate div for each image, use absolute positioning so they stack on top of each other & hide the ones you don't want to see to start with - then use the javascript to show/hide the correct one.

The PHP function could also be used to assemble the javascript function passing on the div or image names as it does so.

[Wickham]

Yet another approach is to use a graphics program to put all the images on a canvass of the same size, so that the images for the gallery are all the same size.

It might be possible to batch process this to save time, depending on which program you use.

[gordo]

craftygeek, on 17 March 2010 - 09:01 PM, said:

A different approach...

If you're using php you could write a function to create a separate div for each image, use absolute positioning so they stack on top of each other & hide the ones you don't want to see to start with - then use the javascript to show/hide the correct one.

The PHP function could also be used to assemble the javascript function passing on the div or image names as it does so.

That's a 'crafty' idea, and one I'll remember for the future... thanks.

[gordo]

Wickham, on 17 March 2010 - 09:10 PM, said:

Yet another approach is to use a graphics program to put all the images on a canvass of the same size, so that the images for the gallery are all the same size.

It might be possible to batch process this to save time, depending on which program you use.

Also a good idea. For my gallery (http://www.ingridvek...dden-test-album) they'd all go onto a 600x600 square. The problem is that the photos are all uploaded via the CMS by my girlfriend, and the easier it is for her, the better. Now, if it was possible to load every photo automatically using PHP onto a canvas during upload, then that would be interesting!