Results 1 to 4 of 4

Thread: Step Carousel Viewer help?

  1. #1
    Join Date
    Mar 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Step Carousel Viewer help?

    1) Script Title: Step Carousel Viewer v1.6.1

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

    3) Describe problem: I am trying to dynamically create an ID value within an A tag based on the current panel. I will be able to create a CSS style to show the user what panel they are viewing.

    This is an example:
    Code:
    <a href="javascript:stepcarousel.stepTo('mygallery', 2)" id="panel1">Link 1</a> <a href="javascript:stepcarousel.stepTo('mygallery', 3)" id="panel2">Link 2</a>
    Is is possible for this script to create the "panel1" value within the ID attribute?

    Thanks,
    Dan

  2. #2
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    If you mean given a collection of nav links that each goes to a specific slide within the Carousel Viewer, and that the link that corresponds to the currently selected slide should be highlighted in some way, your best bet is to use the onunit and onslide event handlers of the script to accomplish this. How to go about it really depends on your knowledge of JavaScript, but here's a working example:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
    
    <script type="text/javascript" src="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">
    
    .navselected{
    background:yellow;
    }
    
    .stepcarousel{
    position: relative; /*leave this value alone*/
    border: 10px solid black;
    overflow: scroll; /*leave this value alone*/
    width: 270px; /*Width of Carousel Viewer itself*/
    height: 200px; /*Height should enough to fit largest content's height*/
    }
    
    .stepcarousel .belt{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
    }
    
    .stepcarousel .panel{
    float: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin: 10px; /*margin around each panel*/
    width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
    }
    
    </style>
    
    <body>
    
    <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, 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 ['external', 'path_to_external_file']
    	oninit:function(){
    		navlinks=[], i=1
    		while (document.getElementById("panel"+i)){
    			navlinks.push(document.getElementById("panel"+i))
    			i++
    			}
    	},
    	onslide:function(){
    		for (var i=0; i<navlinks.length; i++){
    			navlinks[i].className=((i+1)==statusA)? "navselected" : "none"
    		}
    	}
    })
    
    </script>
    
    <div id="mygallery" class="stepcarousel">
    <div class="belt">
    
    <div class="panel">
    <img src="http://i30.tinypic.com/531q3n.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://i29.tinypic.com/xp3hns.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://i26.tinypic.com/11l7ls0.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://i31.tinypic.com/119w28m.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://i27.tinypic.com/34fcrxz.jpg" />
    </div>
    
    </div>
    </div>
    
    <p>
    <b>Current Panel:</b> <span id="statusA"></span> <b style="margin-left: 30px">Total Panels:</b> <span id="statusC"></span><br />
    
    <a href="javascript:stepcarousel.stepTo('mygallery', 1)" id="panel1">1st Panel</a> 
    <a href="javascript:stepcarousel.stepTo('mygallery', 2)" id="panel2">2nd Panel</a> 
    <a href="javascript:stepcarousel.stepTo('mygallery', 3)" id="panel3">3rd Panel</a> 
    <a href="javascript:stepcarousel.stepTo('mygallery', 4)" id="panel4">4th Panel</a> 
    <a href="javascript:stepcarousel.stepTo('mygallery', 5)" id="panel5">5th Panel</a>
    
    </p>
    DD Admin

  3. #3
    Join Date
    Mar 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    You know exactly what I'm working for, but I tried the oninit and onslide handlers that you created (thanks for that) and it did not affect anything.

    I added the .navselected CSS style to my CCS style sheet and here is the link to the site I am working on: http://www.katart.biz/verymerry/

    Here is the code:

    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:false, moveby:1, pause:9000},
    	panelbehavior: {speed:600, wraparound:false, persist:false},
    	defaultbuttons: {enable: true, moveby: 1, leftnav: ['images/prev.gif', -20, 143], rightnav: ['images/next.gif', -20, 143]},
    	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    	contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
    	
    	oninit:function(){
    		navlinks=[], i=1
    		while (document.getElementById("panel"+i)){
    			navlinks.push(document.getElementById("panel"+i))
    			i++
    			}
    	},
    	onslide:function(){
    		for (var i=0; i<navlinks.length; i++){
    			navlinks[i].className=((i+1)==statusA)? "navselected" : "none"
    		}
    	}
    	
    })
    
    </script>
    
    <div id="mygallery" class="stepcarousel">
    <div class="belt">
    
    <div class="panel"><img src="images/family.jpg" width="505" height="312" />
      <div class="bodytext">
      <h1>Merry Christmas</h1>
      <p>Anne, Matt, Dory, Sam, Crawford, Gray and Miles would to wish you and yours a very Merry Christmas and Healthy and Happy New Year. In 2008 our family celebrated two graduations and very special birthday of a very special family member. Please click on the names below to see what we have been doing in ’08 and to see who had the special birthday.</p>
    </div>
    <div class="clr"><!-- --></div>
    </div>
    
    <div class="panel">
    <img src="images/nophoto.jpg" width="505" height="312" />
    <div class="bodytext">
      <h1>Anne</h1>
      <p>Updates coming soon…</p>
    </div>
    <div class="clr"><!-- --></div>
    </div>
    
    <div class="panel">
    <img src="images/matt.jpg" width="505" height="312" />
    <div class="bodytext">
      <h1>Matt</h1>
      <p>My big news is that after ten years of successful racing, Jimmy Gubelmann and I decided to retire the Windigo ’57 Chevrolet. The picture was taken at the Antique Automobile Museum in Hershey, Pa., where the ’57 will be on exhibit. Standing with me are John Marshall, Tim Friend, Mike Nunes and Jimmy. We will all miss our anual trip to Mexico, but most importantly, we all had fun and no one got hurt.</p>
      <p>I am still heading up Travel Services Company in Berwyn,Pa.and can still be reached at <a href="mailto:matt@travelservicescompany.com">matt@travelservicescompany.com</a>.</p>
      <h3>Merry Christmas and<br> 
        Happy New Year!!</h3>
    </div>
    <div class="clr"><!-- --></div>
    </div>
    
    <div class="panel">
    <img src="images/nophoto.jpg" width="505" height="312" />
    <div class="bodytext">
      <h1>Dory</h1>
      <p>Updates coming soon…</p>
    </div>
    <div class="clr"><!-- --></div>
    </div>
    
    <div class="panel">
    <img src="images/nophoto.jpg" width="505" height="312" />
    <div class="bodytext">
      <h1>Sam</h1>
      <p>Updates coming soon…</p>
    </div>
    <div class="clr"><!-- --></div>
    </div>
    <div class="panel"> 
    <img src="images/nophoto.jpg" width="505" height="312" />
        <div class="bodytext">
          <h1>Crawford</h1>
          <p>Updates coming soon…</p>
        </div>
      <div class="clr">
        <!-- -->
      </div>
    </div>
    <div class="panel">
    <img src="images/nophoto.jpg" width="505" height="312" />
        <div class="bodytext">
          <h1>Gray</h1>
          <p>Updates coming soon…</p>
        </div>
      <div class="clr">
        <!-- -->
      </div>
    </div>
    <div class="panel">
    <img src="images/nophoto.jpg" width="505" height="312" />
        <div class="bodytext">
          <h1>Miles</h1>
          <p>Updates coming soon…</p>
        </div>
      <div class="clr">
        <!-- -->
      </div>
    </div>
    <div class="panel">
    <img src="images/nophoto.jpg" width="505" height="312" />
        <div class="bodytext">
          <h1>Our Special Family Member</h1>
          <p>Updates coming soon…</p>
        </div>
      <div class="clr">
          <!-- -->
        </div>
    </div>
    
    </div>
    </div>
    
    
    
    </div>
    <div id="bottom">
      <div class="footer">
      
      <ul>
        <li><a href="javascript:stepcarousel.stepTo('mygallery', 2)" id="panel1">Anne</a></li>
        <li><a href="javascript:stepcarousel.stepTo('mygallery', 3)" id="panel2">Matt</a></li>
        <li><a href="javascript:stepcarousel.stepTo('mygallery', 4)" id="panel3">Dory</a></li>
        <li><a href="javascript:stepcarousel.stepTo('mygallery', 5)" id="panel4">Sam</a></li>
        <li><a href="javascript:stepcarousel.stepTo('mygallery', 6)" id="panel5">Crawford</a></li>
        <li><a href="javascript:stepcarousel.stepTo('mygallery', 7)" id="panel6">Gray</a></li>
        <li><a href="javascript:stepcarousel.stepTo('mygallery', 8)" id="panel7">Miles</a></li>
        <li><a href="javascript:stepcarousel.stepTo('mygallery', 9)" class="special"><span>Very Special<br />
        Family Member</span></a></li>
      </ul>
    Please let me know what could be wrong. Thanks

  4. #4
    Join Date
    Mar 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I figured out my error. I had to add the id=panelx to all links.

    Thanks very much for your help.

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
  •