Image shifts when setting position

hey guys,

I’m in the process of developing a picture gallery and everything is working but the images keep on shifting, because they are different widths and I try to center them on the webpage.

here is the webpage:

on Google Chrome, only the first 2 pictures shift, and then if you watch the slideshow, no other pictures will shift and it’ll loop around. On IE, every single picture shifts.

I’ve included a chunk of my javascript where I think this issue happens…you can also view the rest of the javascript from the source on the website.

I’m mainly looking to fix this shifting problem, but if you have any other recommendations I’d like to hear them.


function galleryLaunch() {

	var theimg = document.getElementById(imgID);
	var theimg2 = document.getElementById(imgID2);

	//grab the first image in the array
	theimg.src = photoArray[first_Index];
	//grab the second image in the array
	theimg2.src = photoArray[second_Index];

	first_Index = first_Index + 1;
	second_Index = second_Index + 1;

	//get the width of the images and align them properly
	var theimgWidth = theimg.offsetWidth;
	var theimg2Width = theimg2.offsetWidth; = ((948 - theimgWidth) / 2) + "px"; = ((948 - theimg2Width) / 2) + "px";

	//set the opacity of the back image to zero
	setOpacity(document.getElementById(imgID2), img2Opacity);