Step Carousel - id and class questions

[kylu]

1) Script Title: Step carousel

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

3) Describe problem:

Hi there,

can i start the carousel from a panel with an id="start" and give it a class="active" ?

thx for any help
all best..

[ddadmin]

Hmm can you elaborate? What do you mean by start the carousel from a panel with an id="start"? With regards to the 2nd part of your question, are you basically asking how to apply a CSS class of "active" to the currently shown panel?

[jscheuer1]

To have the carousel start on the panel div with an id of 'start' and to have the active panel div be given the class name of 'active', add the two functions as shown to your on page 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:false},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['10/leftnav.gif', -5, 80], rightnav: ['10/rightnav.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(){
		var id = 'mygallery', car = stepcarousel.configholder[id], $ = jQuery;
		stepcarousel.stepTo(id, $('#' + id + ' .' + car.panelclass).index($('#start')) + 1);
	},
	onslide: function(){
		var id = 'mygallery', car = stepcarousel.configholder[id], $ = jQuery;
		$('#' + id + ' .' + car.panelclass).removeClass('active').eq(car.currentpanel).addClass('active');
	}
})

</script>

Don't miss the added comma (red) after the contenttype value. Also make sure to use your gallery's id in the three places indicated (green).

[kylu]

Thx for the answer, i'll try to b more specific:

lets assume i have a set of div's:

<div id="mygallery" class="stepcarousel">
    <div class="belt">
        <div class="panel">slider content1</div>
        <div class="panel active" id="start">slider content2</div>
        <div class="panel">slider content3</div>
        <div class="panel">slider content4</div>
        <div class="panel">slider content5</div>
    </div>
</div>

is it possible after loading the page to start browsing the carousel from the div with an id="start" and apply a css class to it class="active".

the idea behind it, is to make a "carousel-navigation".

thx in advance for your help..

[jscheuer1]

I think you may have missed my response see post #3 in this thread.

[kylu]

you replied while i was writing my elaboration

thanks a lot.. i'll try out the script as soon as possible..

all best