Hmm this is bit of a hard one to track down. Instead the solution I came up with is just to position the nav buttons relative to the parent container of the carousel, instead of the document itself. To do this, firstly, give the parent container an ID attribute (addition in red) on your page:
Code:
<div id="grid_12" class="grid_12" style="position:relative">
Then, inside the initialization code for the step carousel, make use of the oninit() event to dynamically create the nav buttons and add it to the parent container like so:
Code:
<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:false, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: false, moveby: 1, leftnav: ['/js/stepcarousel/arrowl4.gif', -5, 60], rightnav: ['/js/stepcarousel/arrowr4.gif', -20, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'], //content setting ['inline'] or ['ajax', 'path_to_external_file']
oninit:function(){
var $ = jQuery
var $grid12 = $('#grid_12')
var $leftbut = $('<img src="left.gif" style="position:absolute; left:-20px; top:50px; cursor:pointer" />').appendTo( $grid12 ) // create left nav button
var $rightbut = $('<img src="right.gif" style="position:absolute; top:50px; cursor:pointer" />').appendTo( $grid12 ) // create right nav button
$leftbut.bind('click', function(){
stepcarousel.stepBy('mygallery', -1)
})
$rightbut.bind('click', function(){
stepcarousel.stepBy('mygallery', 1)
})
}
})
</script>
The changes are in red. Obviously change left.gif and right.gif to point to the locations of your left and right nav buttons. I've tested this, and it seems to work.
Bookmarks