Results 1 to 6 of 6

Thread: Help populating Stepcarousel JQuery Slider

  1. #1
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Help populating Stepcarousel JQuery Slider

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

    Code:
    <!-- 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
    Last edited by jscheuer1; 08-30-2010 at 08:16 AM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    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 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.
    Last edited by jscheuer1; 08-30-2010 at 10:17 PM. Reason: precision
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •