Help populating Stepcarousel JQuery Slider

[lissabelle]

1) Script Title: Stepcarousel JQuery Slider

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

3) Describe problem: I have installed a WP from Site5.com called Webfolio. This theme has the Stepcarousel JQuery Slider function. i have managed to upload only one featured project to this slider and cannot, no matter what I do add any other projects to the slider, even after going through the very minimal documentation provided by Site5. I have trawled the forums for help, even asking what to do on the Site5 forums with no response, not even a look in.. so I though going straight to the source, Dynamic Drive is my last option to get this to populate properly.

Can you please, please please take a look at my site by viewing the source code and tell me if you can see any breaks/conflicts and or missing elements in the code? As you will see it, is only showing one featured project present..

<!-- begin slider -->
	<!-- begin slider -->
			<div id="slider" >
					<div class="stepcarousel">
						<div class="belt">
																																																<!-- slider item -->
							<div class="panel">
							<div class="image"><a href="http://www.brandneuemedia.com/blog/talent-portraits-drawn-with-cassette-tapes/"><img src="http://www.brandneuemedia.com/wp-content/uploads/2010/06/audrey-reclining-slider.jpg" border="0" alt="Talent: Portraits Drawn with…Cassette Tapes!" /></a></div>
								<div class="right">
									<div class="text">
										<div class="featured"><img src="http://www.brandneuemedia.com/wp-content/themes/webfolio_wp/images/ico_star.png" alt="Featured" /> FEATURED PROJECT</div>
										<h1><a href="http://www.brandneuemedia.com/blog/talent-portraits-drawn-with-cassette-tapes/">Talent: Portraits Drawn with…Cassette Tapes!</a></h1>
										<p>Erika Iris Simmons breathes life into all things recycled by making portraits of movie stars, beauty and musicians from old dusty cassette tapes…</p>
									</div>
								</div>
							</div>
																							</div>
					</div>
			</div>
			<!-- end slider -->
	<!-- begin home boxes -->
		<!-- end home boxes -->


<!-- slider setup -->
<script type="text/javascript">
			stepcarousel.setup({
				galleryid: 'slider', //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:5000},
				panelbehavior: {speed:500, wraparound:false, persist:true},
				defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://www.brandneuemedia.com/wp-content/themes/webfolio_wp/images/but_prev.png', 653, 300], rightnav: ['http://www.brandneuemedia.com/wp-content/themes/webfolio_wp/images/but_next.png', -170, 300]},
				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']
			})
			
			</script>

</div>
	<!-- end content -->

The website in question is http://www.brandneuemedia.com

I have resized the image to the recommended 600 x 337, uploaded via the installation instructions and still.....no cigar!

Please help me rectify this problem...im going crazy trawling through code i don't particulary understand... =(

Thanks in advance x

[jscheuer1]

In your markup you have only one panel division. You need one for each of your Carousel contents.

[lissabelle]

one panel division..? Can you be more specific as to what this is means?

I am completely new to this, so am not sure what this means?

Would it be this:
panelclass: 'panel', //class of panel DIVs each holding content

If so can you guide me how to alter this? Ideally I want 3 panels and to shift from 1-3 and back to 1.

Thanks for the initial response..wasn't really expecting anything =)

[jscheuer1]

Right now, you have only one panel division in your belt division (from your page's source code):

	<!-- begin slider -->
			<div id="slider" >
					<div class="stepcarousel">
						<div class="belt">
																																																<!-- slider item -->
							<div class="panel">
							<div class="image"><a href="http://www.brandneuemedia.com/blog/talent-portraits-drawn-with-cassette-tapes/"><img src="http://www.brandneuemedia.com/wp-content/uploads/2010/06/audrey-reclining-slider.jpg" border="0" alt="Talent: Portraits Drawn with…Cassette Tapes!" /></a></div>
								<div class="right">
									<div class="text">
										<div class="featured"><img src="http://www.brandneuemedia.com/wp-content/themes/webfolio_wp/images/ico_star.png" alt="Featured" /> FEATURED PROJECT</div>
										<h1><a href="http://www.brandneuemedia.com/blog/talent-portraits-drawn-with-cassette-tapes/">Talent: Portraits Drawn with…Cassette Tapes!</a></h1>
										<p>Erika Iris Simmons breathes life into all things recycled by making portraits of movie stars, beauty and musicians from old dusty cassette tapes…</p>
									</div>
								</div>
							</div>
																							</div>
					</div>
			</div>
			<!-- end slider -->

To get more, you need more. It's as simple as that.

[lissabelle]

John,

Thanks again for the response. Ok so I need to get more panels...
'to get more, i need more' - sounds simple enough, but to me, as a complete beginner, I understand where the problem is now; but am not clear on how I would add more panels.

I do apologise if this is wasting your time, but please don't assume I know what your referring to; to you it may be so simple, this is the exact reason why I am asking for your assistance, because I do not understand.. (unfortunately)

It would be very much appreciated if you could tell me in 'idiot language' =) just how to 'get more' panels..

Do I copy and paste the code relating to the first panel and alter it?, do I tick a box somewhere?

I don't know what to do...?

Hope you can help ...

[jscheuer1]

Well, here I may know less than you do. I use a text only editor for all web design work. So I would use the first option:

copy and paste the code relating to the first panel and alter it

And if your editor has a code view that allows that (you can always use NotePad to edit the file if not), that's a perfectly fine way to go.

So then you would have like:

	<!-- begin slider -->
			<div id="slider" >
					<div class="stepcarousel">
						<div class="belt">
																																																<!-- slider item -->
							<div class="panel">
							<div class="image"><a href="http://www.brandneuemedia.com/blog/talent-portraits-drawn-with-cassette-tapes/"><img src="http://www.brandneuemedia.com/wp-content/uploads/2010/06/audrey-reclining-slider.jpg" border="0" alt="Talent: Portraits Drawn with…Cassette Tapes!" /></a></div>
								<div class="right">
									<div class="text">
										<div class="featured"><img src="http://www.brandneuemedia.com/wp-content/themes/webfolio_wp/images/ico_star.png" alt="Featured" /> FEATURED PROJECT</div>
										<h1><a href="http://www.brandneuemedia.com/blog/talent-portraits-drawn-with-cassette-tapes/">Talent: Portraits Drawn with…Cassette Tapes!</a></h1>
										<p>Erika Iris Simmons breathes life into all things recycled by making portraits of movie stars, beauty and musicians from old dusty cassette tapes…</p>
									</div>
								</div>
							</div>
							<div class="panel">
							<div class="image"><a href="http://www.brandneuemedia.com/blog/talent-portraits-drawn-with-cassette-tapes/"><img src="http://www.brandneuemedia.com/wp-content/uploads/2010/06/audrey-reclining-slider.jpg" border="0" alt="Talent: Portraits Drawn with…Cassette Tapes!" /></a></div>
								<div class="right">
									<div class="text">
										<div class="featured"><img src="http://www.brandneuemedia.com/wp-content/themes/webfolio_wp/images/ico_star.png" alt="Featured" /> FEATURED PROJECT</div>
										<h1><a href="http://www.brandneuemedia.com/blog/talent-portraits-drawn-with-cassette-tapes/">Talent: Portraits Drawn with…Cassette Tapes!</a></h1>
										<p>Erika Iris Simmons breathes life into all things recycled by making portraits of movie stars, beauty and musicians from old dusty cassette tapes…</p>
									</div>
								</div>
							</div>
																							</div>
					</div>
			</div>
			<!-- end slider -->

Then change one of them to use different image(s) and/or text. Add as many panel divisions as you like.

If this "Webfolio" thing has some sort of interface for adding panels, you can try using that. But I don't know if it does, or if it does, how it works.