Image shifts when setting position

JavaScript
1

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:
http://travishomeimprovements.com/randomstuff/index.html

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.

thanks


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;


	theimg.style.left = ((948 - theimgWidth) / 2) + "px";
	theimg2.style.left = ((948 - theimg2Width) / 2) + "px";

	//set the opacity of the back image to zero
	setOpacity(document.getElementById(imgID2), img2Opacity);
	setTimeout("photoGallery()",pauseSeconds*1000);
}