Step Carousel Viewer - Jump to specific slide

[bento]

1) Script Title:
Step Carousel Viewer

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...epcarousel.htm

3) Describe problem:
I am trying to build a website based on the Step Carousel Viewer. One way of navigating is by clicking onto "Back" and "Next", which works fine. However I would like to be able to jump to a specific slide i.e. "Biography" no matter of the position of the slide show at that time.

Try:
1. Click onto "Next", it will take you to the second slide - fine
2. Click onto "Biography", the slide show jumps back to the first slide, instead of the third (as defined in the button command)! Why?

Strangely, when clicking onto "Biography" without using "Next" or "Back" links the jump to the "Biography" slide works fine.

Also, when clicking twice onto "Biography" the slideshow keeps bouncing back and forth between the first & third slide, whereas it should simply stop on the third slide.

4. Testing Site Domain
http://bentographics.com/test/MarianneBailey/

How can this be fixed?
I will donate 30$ to your Paypal if you help me out on this.

Many thanks for your help!

[jscheuer1]

You are using this command:

javascript:stepcarousel.stepBy('mygallery', 2)

when you should be using:

javascript:stepcarousel.stepTo('mygallery', 3)

Furthermore, although the demo page suggests using the href="javascript:something()" convention, it isn't the best thing to do. It can cause problems in some browsers in some situations.

What I would suggest is putting a dummy href, it can still look the same, but something more descriptive (because the href, even when it's a dummy, often appears in the browser's status bar) would be better, and then using the onclick event of the link to actually do the work, example:

<a href="javascript:biography();" 
onclick="stepcarousel.stepTo('mygallery', 3);return false;" 
style="margin-left: 100px">Biography</a>

[jscheuer1]

OK, this is in response to a private request by the same person who opened this thread. They want to jump back to the first panel instead of sliding. I'm not sure about all of the ins and outs of this, how it will play out in any given setup (the Viewer is so flexible) but I tried to make it as intuitive as possible, and it could still be tweaked. I prefer the default action of the script though. But to do this, replace the two functions of the same name in the stepcarousel.js file with these (additions highlighted):

	stepTo:function(galleryid, pindex){ /*User entered pindex starts at 1 for intuitiveness. Internally pindex still starts at 0 */
		var config=stepcarousel.configholder[galleryid]
		if (typeof config=="undefined"){
			alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!")
			return
		}
		var pindex=Math.min(pindex-1, config.paneloffsets.length-1)
		if(config.currentpanel > 1 && pindex == 0)
		config.$belt[0].style.left = 0;
		var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset)
		config.$belt.animate({left: -endpoint+'px'}, 'slow', function(){config.onslideaction(this)})
		config.currentpanel=pindex
		this.statusreport(galleryid)
	},

	stepBy:function(galleryid, steps){
		var config=stepcarousel.configholder[galleryid]
		if (typeof config=="undefined"){
			alert("There's an error with your set up of Carousel Viewer \""+galleryid+ "\"!")
			return
		}
		var direction=(steps>0)? 'forward' : 'back' //If "steps" is negative, that means backwards
		var pindex=config.currentpanel+steps //index of panel to stop at
		pindex=(pindex>config.paneloffsets.length-1 || pindex<0 && pindex-steps>0)? 0 : (pindex<0)? config.paneloffsets.length+steps : pindex //take into account end or starting panel and step direction 
		var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset) //left distance for Belt DIV to travel to
		if(config.currentpanel == config.paneloffsets.length -1 && pindex == 0)
		config.$belt[0].style.left = 0;
		else if (pindex==0 && direction=='forward' || config.currentpanel==0 && direction=='back'){ //decide whether to apply "push pull" effect
			config.$belt.animate({left: -config.paneloffsets[config.currentpanel]-(direction=='forward'? 100 : -30)+'px'}, 'normal', function(){
				config.$belt.animate({left: -endpoint+'px'}, 'slow', function(){config.onslideaction(this)})
			})
		}
		else
			config.$belt.animate({left: -endpoint+'px'}, 'slow', function(){config.onslideaction(this)})
		config.currentpanel=pindex
		this.statusreport(galleryid)
	},

Another option would (I think, haven't really tried that, but it looks like the script can handle it) be to speed up the action just a bit when traversing from last to first, I might like that better, but it is up to you.

[bento]

Thank you for the script update. It works already, however now it simply skips back to the start without any transition. I was thinking it would continue the smooth slide movement and slide-in the first slide-image after the last one. Like a cycle or continuous slide movement in the same direction. I hope this makes sense.

I.e. on my sample site above, after navigating to "Biography" the first slide-image would move into view from the right side.

[Airmr]

First to say: great Script, it works like a charm.

I was thinking it would continue the smooth slide movement and slide-in the first slide-image after the last one. Like a cycle or continuous slide movement in the same direction. I hope this makes sense.

Is that possible?