Step Carousel onslide:funtion()

[Maarten]

Hi there,

I try to use the step carousel with the onslide-function, it fire up on init, but during auto-sliding and during clicking on a stepBy-link it doesn't work.

this is how I init the step carousel:

<script type=\"text/javascript\">

					stepcarousel.setup({
						galleryid: 'portfolioBar', //id of carousel DIV
						beltclass: 'barBelt', //class of inner \"belt\" DIV containing all the panel DIVs
						panelclass: 'bar', //class of panel DIVs each holding content
						autostep: {enable: true, moveby:1, pause:1000},
						panelbehavior: {speed:100, wraparound:true, persist:false},
						defaultbuttons: {enable: false, moveby: 1, leftnav: ['leftnav.gif', -5, 80], rightnav: ['rightnav.gif', -18, 80]},
						statusvars: ['currentfirstslide', 'currentlastslide', 'totalslides'], //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']
						onslide:function(){
							 jQuery('#portfolioSheetBelt').animate({marginTop : -(currentfirstslide * 337) + 'px'});
							 
						}
					})

					</script>

What am I doing wrong?

[ddadmin]

It should work (there's no reported issue on this feature). What's the URL to the problem page, and how should it behave versus how it is right now?

[Maarten]

http://new.emminet.nl/website/portfolio_websites/

this is the link. You see the carousel going and the goal is to slide the div above. with a jquery command.

<script type=\"text/javascript\">

					stepcarousel.setup({
						galleryid: 'portfolioBar', //id of carousel DIV
						beltclass: 'barBelt', //class of inner \"belt\" DIV containing all the panel DIVs
						panelclass: 'bar', //class of panel DIVs each holding content
						autostep: {enable: true, moveby:1, pause:1000},
						panelbehavior: {speed:100, wraparound:true, persist:false},
						defaultbuttons: {enable: false, moveby: 1, leftnav: ['leftnav.gif', -5, 80], rightnav: ['rightnav.gif', -18, 80]},
						statusvars: ['currentfirstslide', 'currentlastslide', 'totalslides'], //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']
						onslide:function(){
							 jQuery('#portfolioSheetBelt').animate({marginTop : -(currentfirstslide * 337) + 'px'});
							 
						}
					})

					</script>

					<div id=\"portfolioBar\" class=\"stepcarousel\">
					  	<div class=\"barBelt\" id=\"sheetLinks\">
								<div class=\"bar\">&nbsp;</div>
								<div class=\"bar\">
									<a href=\"#\"><img src=\"/templates/emminet.nl_new/style/images/portfolio_180.png\" border=\"1\" alt=\"\" name=\"image1\" /></a>
								</div>
								<div class=\"bar\">
									<a href=\"#\"><img src=\"/templates/emminet.nl_new/style/images/portfolio_180.png\" border=\"0\" alt=\"\" name=\"image2\" /></a>
								</div>
								<div class=\"bar\">
									<a href=\"#\"><img src=\"/templates/emminet.nl_new/style/images/portfolio_180.png\" border=\"0\" alt=\"\" name=\"image3\" /></a>
								</div>
								<div class=\"bar\">
									<a href=\"#\"><img src=\"/templates/emminet.nl_new/style/images/portfolio_180.png\" border=\"0\" alt=\"\" name=\"image4\" /></a>
								</div>
								<div class=\"bar\">
									<a href=\"#\"><img src=\"/templates/emminet.nl_new/style/images/portfolio_180.png\" border=\"0\" alt=\"\" name=\"image5\" /></a>
								</div>
								<div class=\"bar\">
									<a href=\"#\"><img src=\"/templates/emminet.nl_new/style/images/portfolio_180.png\" border=\"0\" alt=\"\" name=\"image6\" /></a>
								</div>
								<div class=\"bar\">
									<a href=\"#\"><img src=\"/templates/emminet.nl_new/style/images/portfolio_180.png\" border=\"0\" alt=\"\" name=\"image7\" /></a>
								</div>
								<div class=\"bar\">
									<a href=\"#\"><img src=\"/templates/emminet.nl_new/style/images/portfolio_180.png\" border=\"0\" alt=\"\" name=\"image8\" /></a>
								</div>
								<div class=\"bar\">
									<a href=\"#\"><img src=\"/templates/emminet.nl_new/style/images/portfolio_180.png\" border=\"0\" alt=\"\" name=\"image9\" /></a>
								</div>
								<div class=\"bar\">&nbsp;</div>
								
						</div>
						
					</div>
					
					<div id=\"potfolioSheet\">
						<div id=\"portfolioSheetBelt\">
							<div>
								<h1>1</h1>
								<img src=\"/uploads/images/portfolio_mushcomb.jpg\" border=\"0\" alt=\"\" />
								<p>Mush Comb is een bedrijf dat machines bouwt voor de champignonteelt. Wereldwijd verkopen zij nieuwe en tweedehands machines.</p>
								<p>eMMinet bouwde voor Mush Comb een complete website met CMS, met daarin een nieuwsbriefmodule.</p>
							</div>
							<div>
								<h1>2</h1>
								<img src=\"/uploads/images/portfolio_mushcomb.jpg\" border=\"0\" alt=\"\" />
								<p>Mush Comb is een bedrijf dat machines bouwt voor de champignonteelt. Wereldwijd verkopen zij nieuwe en tweedehands machines.</p>
								<p>eMMinet bouwde voor Mush Comb een complete website met CMS, met daarin een nieuwsbriefmodule.</p>
							</div>
							<div>
								<h1>3</h1>
								<img src=\"/uploads/images/portfolio_mushcomb.jpg\" border=\"0\" alt=\"\" />
								<p>Mush Comb is een bedrijf dat machines bouwt voor de champignonteelt. Wereldwijd verkopen zij nieuwe en tweedehands machines.</p>
								<p>eMMinet bouwde voor Mush Comb een complete website met CMS, met daarin een nieuwsbriefmodule.</p>
							</div>
							<div>
								<h1>4</h1>
								<img src=\"/uploads/images/portfolio_mushcomb.jpg\" border=\"0\" alt=\"\" />
								<p>Mush Comb is een bedrijf dat machines bouwt voor de champignonteelt. Wereldwijd verkopen zij nieuwe en tweedehands machines.</p>
								<p>eMMinet bouwde voor Mush Comb een complete website met CMS, met daarin een nieuwsbriefmodule.</p>
							</div>
							<div>
								<h1>5</h1>
								<img src=\"/uploads/images/portfolio_mushcomb.jpg\" border=\"0\" alt=\"\" />
								<p>Mush Comb is een bedrijf dat machines bouwt voor de champignonteelt. Wereldwijd verkopen zij nieuwe en tweedehands machines.</p>
								<p>eMMinet bouwde voor Mush Comb een complete website met CMS, met daarin een nieuwsbriefmodule.</p>
							</div>
							<div>
								<h1>6</h1>
								<img src=\"/uploads/images/portfolio_mushcomb.jpg\" border=\"0\" alt=\"\" />
								<p>Mush Comb is een bedrijf dat machines bouwt voor de champignonteelt. Wereldwijd verkopen zij nieuwe en tweedehands machines.</p>
								<p>eMMinet bouwde voor Mush Comb een complete website met CMS, met daarin een nieuwsbriefmodule.</p>
							</div>
							<div>
								<h1>7</h1>
								<img src=\"/uploads/images/portfolio_mushcomb.jpg\" border=\"0\" alt=\"\" />
								<p>Mush Comb is een bedrijf dat machines bouwt voor de champignonteelt. Wereldwijd verkopen zij nieuwe en tweedehands machines.</p>
								<p>eMMinet bouwde voor Mush Comb een complete website met CMS, met daarin een nieuwsbriefmodule.</p>
							</div>
							<div>
								<h1>8</h1>
								<img src=\"/uploads/images/portfolio_mushcomb.jpg\" border=\"0\" alt=\"\" />
								<p>Mush Comb is een bedrijf dat machines bouwt voor de champignonteelt. Wereldwijd verkopen zij nieuwe en tweedehands machines.</p>
								<p>eMMinet bouwde voor Mush Comb een complete website met CMS, met daarin een nieuwsbriefmodule.</p>
							</div>
							<div>
								<h1>9</h1>
								<img src=\"/uploads/images/portfolio_mushcomb.jpg\" border=\"0\" alt=\"\" />
								<p>Mush Comb is een bedrijf dat machines bouwt voor de champignonteelt. Wereldwijd verkopen zij nieuwe en tweedehands machines.</p>
								<p>eMMinet bouwde voor Mush Comb een complete website met CMS, met daarin een nieuwsbriefmodule.</p>
							</div>
							
						</div>
					</div>
					<div style=\"clear:both\"></div>

this is the entire code. it's slashed, because it's inserted through php.

I hope you can help me, while it's my first time working with jQuery.

Regards,
Maarten

[jscheuer1]

I have no idea why this works, but it does:

onslide:function(){
	var num = (currentfirstslide - 1) * -337;
	setTimeout(function(){jQuery('#portfolioSheetBelt').animate({marginTop : num + 'px'});}, 0);
	 
}

Without the timeout, the margin changes once (as reported in Firefox DOM inspector), and then for some reason just remains the same.

Alternatively, if I changed just the css style property (no animation), that would also work. But with the animation it is a bit smoother looking.

In any case, the value -337 seems off (it doesn't allow for a full 'screen' to move through each time, -347 seems right, at least in Firefox), and I would slow down (increase the value for pause of) the Step Carousel, ex:

autostep: {enable: true, moveby:1, pause:4000},

[Maarten]

Wow John, nice work!
It works...
The speed of carousel I put it to 1000 just for testing, then I didn't have to wait for another 5 seconds to see if it works...

I still have to work on the height and CSS, while I just wanted it to work first.

So I need to install the DOM inspector, so I can troubleshoot myself. Although this community comes in very handy!!

As I run a business on my own, I do not have any collegues reflecting things and helping troubleshoot stuf.

Again, thank you very much John , I was working for 3 days now on this script.

Regards,
Maarten

[jscheuer1]

I was just thinking, looking at this again, that this might be better:

onslide:function(){
	var num = (currentfirstslide - 1) * -347;
	if(num === 0){
		jQuery('#portfolioSheetBelt').css('marginTop', 0);
	}
	else{
		setTimeout(function(){jQuery('#portfolioSheetBelt').animate({marginTop : num + 'px'});}, 0);
	}
}

That way it wouldn't have to scroll through all of them on the way back to the first one.

[Maarten]

Thats an option!
But for now I like the way it works with the scrolling.
Maybe it will be better if more stuff comes in.

For now I'm working on the PHP to fill this carousel dynamic trough my CMS.

And within this design my logo isn't positioned correctly, it looks fine on larger resolutions, but on 1024x768 the logo falls over the animated division.

Maybe it's nice to let the logo move to another position when on this part of the site. With a jQuery move.

And the large background-picture needs to be changed.

By now I've set the carousel to 10 seconds, to give people a chance to read the stuff. And I need to generate some controls.

Thanks for helping me! What do you think of my design? Made it myself.

Regards,
Maarten