Enable/disable autostep in Step Carousel Viewer v1.9

[jna]

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/dynamici...epcarousel.htm

[vwphillips]

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]

WORKS PERFECTLY

Thanks a lot :-)

[jna]

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/dynamici...epcarousel.htm

try and click a pagination button...

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

[vwphillips]

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)
	},