Step Carousel Viewer help?

**CoolD78** · 12-10-2008, 05:47 PM

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

**ddadmin** · 12-10-2008, 09:39 PM

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>

**CoolD78** · 12-10-2008, 11:07 PM

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

**CoolD78** · 12-10-2008, 11:28 PM

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

Thanks very much for your help.

Thread: Step Carousel Viewer help?

Thread Tools

Search Thread

Step Carousel Viewer help?

Bookmarks

Bookmarks

Posting Permissions