Cloud step carousel

[drstrangelove]

Does anyone know how I could make the pause interval variable in step carousel? I want to use a random function 1000+Math.floor(Math.random()*5001) to set a pause between 1 & 6 seconds, which varies on each panel as the slideshow progresses, but if I put that formula into stepcarousel.setup({autostep...pause: it just sets the pause for the whole slideshow. Presumably this is because once it is set, the carousel does not refer back to these lines of script for the slideshow?

I've had a play with the code in stepcarousel.js but with not much luck. My experience is predominantly with PHP, and I'm trying to get up to speed with JS, but if someone could help with this it would be greatly appreciated both for the practical help but also so I can can something at the same time.

TIA.

[jscheuer1]

Use this modified version of the script:

Attachment 4240

It will allow you to do in the on page call, for instance:

<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:true, moveby:1, pause: function(){return 1000+Math.floor(Math.random()*5001) + 500;}},
	panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:false},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['10/leftnav.gif', -5, 80], rightnav: ['10/rightnav.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']
})

</script>

Let's zoom in on that line:

autostep: {enable:true, moveby:1, pause: function(){return 1000+Math.floor(Math.random()*5001) + 500;}},

Notice that it is a true function requiring a closing brace in addition to the autostep object's closing brace. I added 500 (the panelbehavior.speed) because I wasn't sure if that 1000 you had there represented that, or was for some other purpose.

Also of note is the fact that you may still use a regular number there instead of a function if you like. In other words, if you have other carousels on this or other pages that you want to use a fixed number for the pause, you can do so without needing a copy of the old script to do it.

Note: This update also contains code that allows for defining the cursor for disabled nav buttons. That code also removes the title from disabled nav buttons. See inside the js file near the top for this configuration line (may be left as is):

	defaultbuttonscur: 'default', //Cursor style for disabled nav buttons (Dec 3rd, 11)

It only comes into play if the carousel's wraparound is false.

[drstrangelove]

Hi,

Thanks very much for that. I see the point about using a function there and also note the changes that have been made to stepcarousel.js

I'll spend some time going through that to try to understand it better.

Regarding the 500 added at the end of the equation, is that not already covered by the 500 in the panel.behaviour line and on line 292 of stepcarousel.js: config.autostep.pause+=config.panelbehavior.speed ?

The 1000 was just to set the lower limit for the pause to be 1 second.

Thanks again for your help and explanation.

[jscheuer1]

I thought that might be what the 1000 was for and part of why I added the 500. And to answer your question, which is the other part of why I added the 500, no. If the the autostep.pause value is a number, then yes the script adds the panelbehavior.speed (in this case 500) to it. But if autostep.pause is a function, as it is in this case, adding anything to it will turn it into a string - useless for what we want it for. That's why in the modified script I put (added the highlighted):

		if (config.autostep && typeof config.autostep.pause !== 'function')
			config.autostep.pause+=config.panelbehavior.speed

I had at first tried to include the panelbehavior.speed somehow, but I didn't see any good way to do it. That doesn't mean that there isn't any, and it could always be done in the 3 places the function is actually used (which I've now tried and it works). But it just seemed easier at the time to put it right in the function the way that I did. More so, considering that I was unsure what that 1000 was for. That way it's entirely within your control. I, as I say have a version now that adds it (panelbehavior.speed) automatically, interested?

Oh, and if you have any questions visa vis "I'll spend some time going through that to try to understand it better", let me know.

[drstrangelove]

Hi.

Thanks for the explanation.

It does seem, though, that the panel speed works fine with the modified script you uploaded, even if the autostep.pause value is a function rather than a number.

My 2 lines of script look like this now:

autostep: {enable:true, moveby:1, pause: function(){return random_min+Math.floor(Math.random()*random_max);}},

panelbehavior: {speed: p_speed, wraparound:false, wrapbehavior:'slide', persist:false},

Where random_min, random_max & p_speed are variables set externally.

If I vary p_speed, it does in fact affect the transition speed between panels. I assume this is browser-independent? I haven't tried it in IE yet because I run Linux on my laptop, but I don't suppose there should be an issue.

I will take you up on your kind offer to about explaining things further, but I'm going to try to figure as much as I can first so that I ask useful (hopefully) rather than dumb questions

[jscheuer1]

I think the main point of that in the original script was to make sure there was at minimum enough time for the carousel to step before the next step. Beyond that, if you don't include it in your pause function, then random_min is effectively reduced by p_speed. As long as the former is greater than the latter, you won't see any problem. There will be slightly shorter times between steps though. But since those are all random, it will be hard to tell.

[drstrangelove]

"..then random_min is effectively reduced by p_speed"

That's what I figured from your revised code - i.e. the +500 applied to the pause function. What happens though, is that the speed variable does in fact seem to alter the transition speed independently of the pause duration even in your modified script (this is what I want BTW ). In other words, if I add, say +2000 (2 seconds) to the end of the function it has a different effect to setting 2000 as the panel speed variable - even when the function is used for the pause. in the former case, the random pause is extended by 2 seconds, whereas in the latter case the transition time is slower.

[jscheuer1]

That's the point. The transition speed (speed) is independent when using the function method for the pause. In the original script speed was added to the pause value to make sure there was enough time to both transition (speed) and view (pause). But as long as your transition speed is less than your minimum pause - that base is covered.

[drstrangelove]

Okay, I'm with you

Thanks for the heads-up again.

[drstrangelove]

I have a problem with my slider working in Chrome and Opera, and have tracked it down to the line:

contenttype: ['ajax','slider_data.htm'],

This works fine in Firefox and IE, but the script doesn't run in Chrome or Opera, unless i change the line to:

contenttype: ['inline'],

Do you have any suggestions why this should be? Thanks!