highlight current pane in Step Carousel Viewer

**brooke** · 01-19-2009, 08:32 PM

1) Script Title: Step Carousel Viewer

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...epcarousel.htm
3) Describe problem:
This is a great script, theres just one thing i cant figure out. I would like to be able to highlight which pane is active in the menu i have put above the carousel using stepcarousel.stepTo('galleryid', index) method. im going to use a UL with list items of these types of links:
<a href="javascript:stepcarousel.stepTo('mygallery', 1)">Home</a> >>
<a href="javascript:stepcarousel.stepTo('mygallery', 2)">About</a> >>
<a href="javascript:stepcarousel.stepTo('mygallery', 3)">Contact</a>

but i have no clue how to highlight which <li> is active in the slider pane.

thanks for your time

**ddadmin** · 01-19-2009, 09:57 PM

If by highlight the current panel you mean apply some visual cue to it (ie: a red border), yes that's possible using the onslide() event handler of the script, plus the undocumented fact that within this event handler, you can reference all the slides wthin the Carousel using the code this.$panels[i], where i is the slide (starting from 0) you wish to access. With that said, the below applies a red border to the current slide:

Code:

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']
	onslide: function(){
		for (var i=0; i<statusC; i++){
			var withinRange=(i>=statusA-1 && i<=statusB-1) //check whether this slide falls within range of active slides currently in view
			if (withinRange)
				this.$panels[i].style.border="3px solid red"
			else
				this.$panels[i].style.border="3px solid white"
		}
	}
})

This is a little cumbersome I agree. The next time the script is updated I'll work this feature directly into the script.

**brooke** · 01-19-2009, 10:20 PM

im afraid i must be screwing something up. do i just need to add that extra code? when i add it, i get an error, and all my panels load in one panel. im very new to all this. heres a screenshot of the code i added, if it helps:

**ddadmin** · 01-19-2009, 10:34 PM

You forgot the comma that should be added after contenttype:

Code:

contenttype: ['inline'],

**brooke** · 01-19-2009, 10:49 PM

oops, good eye

ok, that works for what i think you thought i wanted, but i think i wasnt clear.
let me provide a picture:

i would like to highlight the navigation item of the current pane shown, not the pane itself. for example, have the navigation text of "RT-PACS" be red, when thats the slide shown.

**ddadmin** · 01-19-2009, 11:31 PM

The concept should be virtually identical actually. Just so I understand correctly, you mean highlight the corresponding nav links that go to a specific slide within the Carousel Viewer, ie, one of the following:

Code:

<a href="javascript:stepcarousel.stepTo('mygallery', 1)">Home</a> >>
<a href="javascript:stepcarousel.stepTo('mygallery', 2)">About</a> >>
<a href="javascript:stepcarousel.stepTo('mygallery', 3)">Contact</a>