Well, speaking in general, you can dynamically access the two nav buttons of your Carousel, then alter their CSS top positions, yes. The below is the default example you copied and pasted from the DD script page, with the code in red added that lets you modify the nav buttons' top offset from its current position by x amount:
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.6.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: 270px; /*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:false, 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']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel">
<img src="http://i30.tinypic.com/531q3n.jpg" />
</div>
<div class="panel">
<img src="http://i29.tinypic.com/xp3hns.jpg" />
</div>
<div class="panel">
<img src="http://i26.tinypic.com/11l7ls0.jpg" />
</div>
<div class="panel">
<img src="http://i31.tinypic.com/119w28m.jpg" />
</div>
<div class="panel">
<img src="http://i27.tinypic.com/34fcrxz.jpg" />
</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>
<script type="text/javascript">
function movenavbuttons(amount){
var $leftnav=stepcarousel.configholder['mygallery'].$leftnavbutton
var $rightnav=stepcarousel.configholder['mygallery'].$rightnavbutton
var navposition_top=parseInt($leftnav.css('top'))
$leftnav.css('top', navposition_top+amount+'px')
$rightnav.css('top', navposition_top+amount+'px')
}
</script>
<a href="javascript:movenavbuttons(20)">Move nav buttons down 20px</a>
Step Carousel Navigation buttons issue in Firefox
Reply With Quote
Bookmarks