Results 1 to 4 of 4

Thread: Step Carousel problem with onpanelclick function

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

    Default Step Carousel problem with onpanelclick function

    Step Carousel Viewer v1.9

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

    I would like to make the Step Carousel viewer more intuitive by making it possible to click on the image to advance the carousel. I am having problems with implementing the onpanelclick:function. I am not sure if I have the syntax correct, but as far as I can tell and in every iteration I have tried, I should at least have the punctuation in all the proper places. What is strange is that when I put the onpanelclick section within the stepcarousel.setup, it throws the whole appearance of the page out of whack. The pagination doesn't work, and all of the divs are visible, cascading down the page. When I separate the onpanelclick section into its own <script> tags, the appearance is fine, but clicking on the image to advance still does not work.

    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:400, wraparound:false, persist:true},
    	defaultbuttons: {enable: false, moveby: 1, leftnav: ['images/left.gif', -5, 80], rightnav: ['images/right.gif', -20, 80]},
    	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'],
    	onpanelclick:function(target){
    	if (target.tagName=="IMG") {
      		stepcarousel.stepBy('mygallery', 1);
    		}
    }
    
    })
    </script>
    You can see how I am using this script at http://membrana.us/selections.html

    Thanks in advance for your help.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    You're missing a comma after contenttype.

    This should do it.
    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:400, wraparound:false, persist:true},
    	defaultbuttons: {enable: false, moveby: 1, leftnav: ['images/left.gif', -5, 80], rightnav: ['images/right.gif', -20, 80]},
    	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'],
    	onpanelclick:function(target){
      		stepcarousel.stepBy('mygallery', 1);
    	}
    });
    </script>
    Putting the onpanelclick in it's own <script> tag will do absolutely nothing, hence why it's not doing anything.
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    berrigan (07-04-2011)

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

    Default

    Gosh. I think I stared right through it. Upon such careful examination, I missed the most obvious. Thanks for so kindly pointing it out! It does indeed work now.

  5. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    No problem, I'm glad to help

    In an effort to keep things organized, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
    1. Go to your first post
    2. Edit your first post
    3. Click "Go Advanced"
    4. In the dropdown next to the title, select "RESOLVED"
    Jeremy | jfein.net

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
  •