If all you're doing is showing an enlarged image inside the IFRAME, it doesn't make sense to use an IFRAME at all, but just a regular DIV on the page. Anyhow, I've constructed a fully working example that's inspired by what you're trying to do on your page. Let me know if that's a better approach for you:

Code:
<!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" lang="en" xml:lang="en">

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>

<script type="text/javascript" src="stepcarousel.js">

/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid black;
overflow: scroll; /*leave this value alone*/
width: 570px; /*Width of Carousel Viewer itself*/
height: 200px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>

<body>

<script type="text/javascript">

stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:3000},
	panelbehavior: {speed:500, wraparound:true, persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
	oninit:function(){
		enlargeddiv=document.getElementById("enlargedarea")
		thumbnails=document.getElementById("mygallery").getElementsByTagName("a")
	},
	onslide:function(){
		enlargeddiv.innerHTML='<img src="'+thumbnails[statusA-1]+'" border="0" />'
	}
})

</script>

<div id="enlargedarea" style="border:1px solid black; background:lightyellow; padding:5px; width:700px; height:200px"></div>

<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<a href="http://i30.tinypic.com/531q3n.jpg"><img src="http://i30.tinypic.com/531q3n.jpg" /></a>
</div>

<div class="panel">
<a href="http://i30.tinypic.com/xp3hns.jpg"><img src="http://i29.tinypic.com/xp3hns.jpg" /></a>
</div>

<div class="panel">
<a href="http://i30.tinypic.com/11l7ls0.jpg"><img src="http://i26.tinypic.com/11l7ls0.jpg" /></a>
</div>

<div class="panel">
<a href="http://i30.tinypic.com/119w28m.jpg"><img src="http://i31.tinypic.com/119w28m.jpg" /></a>
</div>

<div class="panel">
<a href="http://i30.tinypic.com/34fcrxz.jpg"><img src="http://i27.tinypic.com/34fcrxz.jpg" /></a>
</div>

</div>
</div>

<p>
<b>Current Panel:</b> <span id="statusA"></span> <b style="margin-left: 30px">Total Panels:</b> <span id="statusC"></span><br />

<a href="javascript:stepcarousel.stepBy('mygallery', -1)">Back 1 Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px">Forward 1 Panel</a> <br />

<a href="javascript:stepcarousel.stepTo('mygallery', 1)">To 1st Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 2)" style="margin-left: 80px">Forward 2 Panels</a>

</p>