PDA

View Full Version : Enable/disable autostep in Step Carousel Viewer v1.9



jna
05-24-2012, 12:58 PM
Is it possible to manipulate the autostep{enable:true} variable from the HTML in a link, maybe like onclick="stepcarousel.stepBy('MyID', 1)" where you reach the "moveby" variable

The whole idea is to make a start/stop button when enabled is set to true. Can't seem to get it to work....

http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

vwphillips
05-24-2012, 03:14 PM
modified function


autorotate:function(galleryid){
var config=stepcarousel.configholder[galleryid]
config.$belt.stop(true, true)
if (config.autostep.enable){
this.stepBy(galleryid, config.autostep.moveby, true);
}
},


html


<input type="button" name="" value="Stop" onmouseup="stepcarousel.configholder['mygallery'].autostep.enable=false;"/>
<input type="button" name="" value="Start" onmouseup="stepcarousel.configholder['mygallery'].autostep.enable=true;"/>

jna
05-25-2012, 11:07 AM
WORKS PERFECTLY

Thanks a lot :-)

jna
05-31-2012, 10:03 AM
Hello again
It seems there is a bug in the autostep function. The bug shows up when you have autostep enabled in a Carousel, and then click on a pagination button. The carousel goes to desired slide but the autostep "stalls" for along time before i starts again

It shows on the first carousel that has autostep enabled on this page
http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

try and click a pagination button...

Can't see why it does not respect the pause variable

vwphillips
06-01-2012, 10:08 AM
I think you are referring to the mouseout auto start

it is not a bug but intended to wait for the pause duration

however this can be changed(changes in red)


alignpanels:function($, config){
var paneloffset=0
config.paneloffsets=[paneloffset] //array to store upper left offset of each panel (1st element=0)
config.panelwidths=[] //array to store widths of each panel
config.$panels.each(function(index){ //loop through panels
var $currentpanel=$(this)
$currentpanel.css({float: 'none', position: 'absolute', left: paneloffset+'px'}) //position panel
$currentpanel.bind('click', function(e){return config.onpanelclick(e.target)}) //bind onpanelclick() to onclick event
paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.get(0).offsetWidth || $currentpanel.css('width')) //calculate next panel offset
config.paneloffsets.push(paneloffset) //remember this offset
config.panelwidths.push(paneloffset-config.paneloffsets[config.paneloffsets.length-2]) //remember panel width
})
config.paneloffsets.pop() //delete last offset (redundant)
var addpanelwidths=0
var lastpanelindex=config.$panels.length-1
config.lastvisiblepanel=lastpanelindex
for (var i=config.$panels.length-1; i>=0; i--){
addpanelwidths+=(i==lastpanelindex? config.panelwidths[lastpanelindex] : config.paneloffsets[i+1]-config.paneloffsets[i])
if (config.gallerywidth>addpanelwidths){
config.lastvisiblepanel=i //calculate index of panel that when in 1st position reveals the very last panel all at once based on gallery width
}
}
config.$belt.css({width: paneloffset+'px'}) //Set Belt DIV to total panels' widths
config.currentpanel=(config.panelbehavior.persist)? parseInt(this.getCookie(config.galleryid+"persist")) : 0 //determine 1st panel to show by default
config.currentpanel=(typeof config.currentpanel=="number" && config.currentpanel<config.$panels.length)? config.currentpanel : 0
var endpoint=config.paneloffsets[config.currentpanel]+(config.currentpanel==0? 0 : config.beltoffset)
config.$belt.css({left: -endpoint+'px'})
if (config.defaultbuttons.enable==true){ //if enable default back/forth nav buttons
var $navbuttons=this.addnavbuttons($, config, config.currentpanel)
$(window).bind("load resize", function(){ //refresh position of nav buttons when page loads/resizes, in case offsets weren't available document.oncontentload
config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")}
config.$leftnavbutton.css({left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px'})
config.$rightnavbutton.css({left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px'})
})
}
if (config.autostep && config.autostep.enable){ //enable auto stepping of Carousel?
var $carouselparts=config.$gallery.add(typeof $navbuttons!="undefined"? $navbuttons : null)
$carouselparts.bind('click', function(){
config.autostep.status="stopped"
stepcarousel.stopautostep(config)
})
$carouselparts.hover(function(){ //onMouseover
stepcarousel.stopautostep(config)
config.autostep.hoverstate="over"
}, function(){ //onMouseout
if (config.steptimer && config.autostep.hoverstate=="over" && config.autostep.status!="stopped"){
config.steptimer=setTimeout( function(){
stepcarousel.autorotate(config.galleryid);
config.steptimer=setInterval(function(){stepcarousel.autorotate(config.galleryid)}, config.autostep.pause)
},500);
config.autostep.hoverstate="out"
}
})
config.steptimer=setInterval(function(){stepcarousel.autorotate(config.galleryid)}, config.autostep.pause) //automatically rotate Carousel Viewer
} //end enable auto stepping check
this.createpaginate($, config)
this.statusreport(config.galleryid)
config.oninit()
config.onslideaction(this)
},