stepcarousel.stepTo - help

[mitja]

1) Script Title:
Step Carousel Viewer v1.9

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

3) Describe problem:
I don't know how to implement the stepcarousel.stepTo('galleryid', index) function from one page to another.
I have some text on the index.html page and the stepcarousel on another page. I would like to go directly to the exact pane (in my case the 8th) in the second page from the index one. I tried

<a href="javascript:stepcarousel.stepTo('feste.sthml/stepcarousel', 8)">

(feste.shtml is the page where the stepcarousel and 8 is the pane where I want to go), but nothing happen. Probably I made some mistake, but can't know how to make the thing to work.

Please help me.
Thanks
Mitja

[jscheuer1]

This script doesn't have that capability. That function (stepTo) is for a link on the page that has the carousel on it. It may also be used elsewhere on the page by other code as I do below. But it can only be employed on the page that has the carousel on it. Using it from some other page, as you've seen, does nothing.

That capability could be added rather easily though. In place of the usual init:

<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, wrapbehavior:'slide', 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 ['ajax', 'path_to_external_file']
})

</script>

Do:

<script type="text/javascript">

(function(){
	function getQval(n) {
		if(typeof n !== 'string'){
			return null;
		}
		var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
		return (m = r.exec(m))? unescape(m[1]) : null;
	}

	var initpanel = getQval('mygallery');

	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, wrapbehavior:'slide', 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 ['ajax', 'path_to_external_file']
		oninit: function(){
			if(initpanel){
				stepcarousel.stepTo('mygallery', initpanel);
			}
		}
	})
})();

</script>

Notice how the gallery id is repeated three times. Whatever you use as the galleryid, substitute that in all three places.

This now allows you to make a link on another page like so (where feste.shtml is the page with the carousel on it):

<a href="feste.shtml?mygallery=8">

Notice again the gallery id. It should be the same as the one used in the script code. 8 is the panel you want to go to.

[mitja]

Thank you very much for the answer. Hope to see this functionality in the new script version.
I will try immediately your suggestion to see how it's work.

[mitja]

Hmmm, I don't know if I made a mistake or what, but I can't step to the "x" panel, but just to the first one.
Here is the web address of the starting page, if you like to see. There are 3 links that "jump to the related page" (Goto 8th - Go to the 8th - Go to 8).
The only thing is that on the starting page I have another instance of stepcarousel, but I don't think that this is the problem.

[jscheuer1]

You skipped the first step. On feste.shtml change:

<script type="text/javascript">

stepcarousel.setup({
	galleryid: 'scritte', //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: true, moveby: 1, leftnav: ['img/left.gif', 2, 376], rightnav: ['img/right.gif', -23, 376]},
	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']
})

</script>

to:

<script type="text/javascript">

(function(){
	function getQval(n) {
		if(typeof n !== 'string'){
			return null;
		}
		var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
		return (m = r.exec(m))? unescape(m[1]) : null;
	}

	var initpanel = getQval('scritte');

	stepcarousel.setup({
		galleryid: 'scritte', //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: true, moveby: 1, leftnav: ['img/left.gif', 2, 376], rightnav: ['img/right.gif', -23, 376]},
		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(){
			if(initpanel){
				stepcarousel.stepTo('scritte', initpanel);
			}
		}
	})
})();

</script>

Also on feste.shtml you have the js/stepcarousel.js external tag twice. You only need it once. Get rid of this (the second) one:

</div>
   <div id="main_bkg"></div>
  </div>  
 <!--
  <div id="right_nav">
  <div id="right_nav_text">Testo da inserire per il menu di navigaizone a destra</div>
  <div id="right_nav_bkg"></div>
  </div>
  -->
  <div id="bottom">
  
  <script type="text/javascript" src="js/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: 3px solid black; . . .

And the styles can and should be combined into one style section in the head. But I'll leave that for another post. Let's just get this much working for now.

[mitja]

I made the changes (changed the first block of code with the second one) on the related file (feste.shtml), but nothing has changed.
The second instance of the script (under <div id="bottom">) is an external file included by SSI.
What do you thing is still wrong?

A big thank for your help.
Mitja Jankovič

[jscheuer1]

It's working the links are wrong (my fault). They are:

<a href="feste.shtml?scritte, 8") traget="_self">Goto 8th</a><br />
<a href="feste.shtml?scritte=8)" traget="_self">Go to the 8th</a><br />
<a href="feste.shtml?scritte=8)">Go to 8</a>

What you need is:

<a href="feste.shtml?scritte=8">Go to 8</a>

Looking back though I see it is my typo that you were copying. Sorry about that. I'm going to fix it now though.

BTW, you don't need any script code for this on the 'sending' page (index2.html).

[mitja]

GOOD SHOT!!!
Now it's working perfectly.
I go to sleep. Here is 20 min past midnight and I'm asleep :-) I will made all the definitive changes tomorrow.