Advanced Search

Results 1 to 2 of 2

Thread: Step Carousel Viewer v1.9 - problem with nav buttons

  1. #1
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Step Carousel Viewer v1.9 - problem with nav buttons

    1) Script Title: Step Carousel Viewer v1.9

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

    3) Describe problem: I have added 3rd party content to a couple of pages, and now the stepcarousel navigation buttons (the red forward and backward arrows) float in the middle of the page rather than where they belong.

    You can see the problem at:

    realestate-bigbear.com/tools/school-info.html

    Please advise,
    Thank you,
    MS

    PS: I am very very new to js.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,863
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    Hmm this is bit of a hard one to track down. Instead the solution I came up with is just to position the nav buttons relative to the parent container of the carousel, instead of the document itself. To do this, firstly, give the parent container an ID attribute (addition in red) on your page:

    Code:
    <div id="grid_12" class="grid_12" style="position:relative">
    Then, inside the initialization code for the step carousel, make use of the oninit() event to dynamically create the nav buttons and add it to the parent container like so:

    Code:
    	<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:false, moveby:1, pause:3000},
    			panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
    			defaultbuttons: {enable: false, moveby: 1, leftnav: ['/js/stepcarousel/arrowl4.gif', -5, 60], rightnav: ['/js/stepcarousel/arrowr4.gif', -20, 60]},
    			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 $ = jQuery
    				var $grid12 = $('#grid_12')
    				var $leftbut = $('<img src="left.gif" style="position:absolute; left:-20px; top:50px; cursor:pointer" />').appendTo( $grid12 ) // create left nav button
    				var $rightbut = $('<img src="right.gif" style="position:absolute; top:50px; cursor:pointer" />').appendTo( $grid12 ) // create right nav button
    				$leftbut.bind('click', function(){
    					stepcarousel.stepBy('mygallery', -1)
    				})
    				$rightbut.bind('click', function(){
    					stepcarousel.stepBy('mygallery', 1)
    				})
    			}
    		})
    		</script>
    The changes are in red. Obviously change left.gif and right.gif to point to the locations of your left and right nav buttons. I've tested this, and it seems to work.
    DD Admin

Similar Threads

  1. Step Carousel Viewer v1.9 problem
    By Lol999 in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 02-14-2011, 09:09 PM
  2. Resolved Step Carousel Viewer - init problem
    By websylvain in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-14-2009, 09:20 AM
  3. Problem with Panels on Step Carousel Viewer
    By Digital.Patience in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 02-02-2009, 06:28 PM
  4. Problem with Step Carousel Viewer Script
    By facilidis in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 09-23-2008, 02:43 PM
  5. Step Carousel Viewer navigation buttons
    By ic408 in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 08-11-2008, 04:58 AM

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
  •