Help populating Stepcarousel JQuery Slider [Archive]

View Full Version : Help populating Stepcarousel JQuery Slider

lissabelle

08-30-2010, 06:53 AM

1) Script Title: Stepcarousel JQuery Slider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.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..



<div id="slider" >
<div class="stepcarousel">
<div class="belt">

<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>





<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>


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

08-30-2010, 08:27 AM

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

lissabelle

08-30-2010, 08:38 AM

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

08-30-2010, 09:43 AM

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


<div id="slider" >
<div class="stepcarousel">
<div class="belt">

<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>


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

lissabelle

08-30-2010, 11:18 AM

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

08-30-2010, 01:52 PM

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:


<div id="slider" >
<div class="stepcarousel">
<div class="belt">

<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>


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.