Results 1 to 8 of 8

Thread: stepcarousel.stepTo - help

  1. #1
    Join Date
    Jan 2009
    Location
    Trieste, Italy
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default stepcarousel.stepTo - help

    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
    Code:
    <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
    Last edited by jscheuer1; 06-02-2011 at 02:35 AM. Reason: fix broken link to script

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    Code:
    <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):

    Code:
    <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.
    Last edited by jscheuer1; 06-02-2011 at 09:54 PM. Reason: fix typo in link syntax (remove vestigial parenthesis)
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    mitja (06-02-2011)

  4. #3
    Join Date
    Jan 2009
    Location
    Trieste, Italy
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #4
    Join Date
    Jan 2009
    Location
    Trieste, Italy
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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:

    Code:
    <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:

    Code:
    </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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #6
    Join Date
    Jan 2009
    Location
    Trieste, Italy
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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č

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    <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:

    Code:
    <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).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    mitja (06-02-2011)

  10. #8
    Join Date
    Jan 2009
    Location
    Trieste, Italy
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •