Results 1 to 2 of 2

Thread: Step Carousel Viewer v1.9 not working

  1. #1
    Join Date
    Oct 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Step Carousel Viewer v1.9 not working

    1) Script Title:

    Step Carousel Viewer v1.9

    2) Script URL (on DD):

    http://www.dynamicdrive.com/dynamici...epcarousel.htm

    3) Describe problem:

    I installed this script as in the instructions but it isn't showing up the same at all on my website. This is a link to my website here ... http://ykrideshare.com/?page_id=21

    Thankyou

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    There are quite a few problems with your set up of the Carousel script. Firstly, you have a duplicate of the initialization call to a carousel:

    Code:
    <script type="text/javascript">
    
    stepcarousel.setup({
    	galleryid: 'post',
    	beltclass: 'belt',
    	panelclass: 'panel',
    	autostep: {enable:false, moveby:1, pause:3000},
    	panelbehavior: {speed:500, wraparound:false, persist:true},
    	defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://designaccord.net/source/wp-content/themes/from-a-window/src/left.png', -5, 80], rightnav: ['http://designaccord.net/source/wp-content/themes/from-a-window/src/right.png', -20, 80]},
    	statusvars: ['statusA', 'statusB', 'statusC'],
    	contenttype: ['inline']
    })
    
    </script>
    You should remove the duplicate located near the bottom of your page.

    Secondly, based on the values you've entered into the initialization code, it expects the step carousel's markup on your page to be in the form of:

    Code:
    <div id="post" class="stepcarousel">
    <div class="belt">
    
    <div class="panel">
    <img src="http://i30.tinypic.com/531q3n.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://i29.tinypic.com/xp3hns.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://i26.tinypic.com/11l7ls0.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://i31.tinypic.com/119w28m.jpg" />
    </div>
    
    <div class="panel">
    <img src="http://i27.tinypic.com/34fcrxz.jpg" />
    </div>
    
    </div>
    </div>
    
    <p>
    <b>Current Panel:</b> <span id="statusA"></span> <b style="margin-left: 30px">Total Panels:</b> <span id="statusC"></span>
    </p>
    
    <p id="mygallery-paginate" style="width: 250px; text-align:center">
    <img src="opencircle.png" data-over="graycircle.png" data-select="closedcircle.png" data-moveby="1" />
    </p>
    
    <p>
    <a href="javascript:stepcarousel.stepBy('mygallery', -1)">Back 1 Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px">Forward 1 Panel</a> <br />
    
    <a href="javascript:stepcarousel.stepTo('mygallery', 1)">To 1st Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 2)" style="margin-left: 80px">Forward 2 Panels</a>
    </p>
    Whereby the carousel's main container carries an ID of "post", the inner container a class of "belt", and each individual DIV content a class of "panel". The structure of the markup should also be in the hierarchy laid out. Looking at the markup for your carousel, I don't see the above structure. You should redo the markup.
    DD Admin

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
  •