New Image width won't update

JavaScript
1

I’ve been building this simple image viewer for an image gallery from scratch. Basically it loads the large image on the same page. The div is hidden when the page first loads, then when the user clicks on a thumbnail, the div is then set to “visible” with javascript and the larger images are shown. But for some reason the image width isn’t updating correctly. Here is the code I’m working with:

The HTML for the hidden div (the large view):


<div id="bigcontainer">
	<div id="bigcontainer2">
		<div id="closediv">
			<a href="#" onClick="exitBigPicture(); return false;"><img src="images/exit.jpg" /></a>
		</div>
		<div id="bigpic">
			<img id="bigpicslot" src="" />
			<div id="bigdesc">Description</div>
		</div>
	</div>
</div>

The HTML for the thumbnail that will be clicked:


<div class="pictures"><a href="images/artwork/img1-large.jpg" onClick="showBigPic('images/artwork/img1-large.jpg'); return false;"><img src="images/artwork/img1.jpg" style="border: 0;" /><span class="pictext">Description</span></a></div>

The JavaScript:


	function showBigPic(thesource) {
		document.getElementById("bigpicslot").src = thesource;
		imageWidth = document.getElementById("bigpicslot").width;
		document.getElementById("bigcontainer2").style.width = imageWidth + "px";
		document.getElementById("closediv").style.width = imageWidth + "px";
		document.getElementById("bigpic").style.width = imageWidth + "px";
		document.getElementById("bigpicopacity").style.visibility = "visible";
		document.getElementById("bigcontainer").style.visibility = "visible";
		document.getElementById("bigcontainer2").style.visibility = "visible";
		document.getElementById("closediv").style.visibility = "visible";
		document.getElementById("bigpic").style.visibility = "visible";
		document.getElementById("bigdesc").style.visibility = "visible";
	}
	function exitBigPicture() {
		document.getElementById("bigpicopacity").style.visibility = "hidden";
		document.getElementById("bigcontainer").style.visibility = "hidden";
		document.getElementById("bigcontainer2").style.visibility = "hidden";
		document.getElementById("closediv").style.visibility = "hidden";
		document.getElementById("bigpic").style.visibility = "hidden";
		document.getElementById("bigdesc").style.visibility = "hidden";
	}
2

May I suggest you learn JQuery?
Your code will work much better, will be just a couple of lines longs, works on any browser and so on…
I would also suggest not using the visibility style, since even when you set it to hidden, it will still take space on the page. Use the display CSS property instead.
I would also use firebug to debug the code, and see the width and the DOM inside showBigPic function…