Floatbox Cycler issues

Page: 1

Author Post
Member
Registered: Jul 2012
Posts: 4
I have a cycler running on a page
http://www.bittleston.com/drawings/all/

first off I want it to run real slow but I can't get the cycleInterval option to work, it always cycles at the same speed.
Am I setting it in the wrong place? I have checked to make sure it is not being set elsewhere.

I am setting it in the containing div like so:
<div class="fbCycler floatbox" data-fb-options="cycleInterval:8 cycleFadeDuration:3.5 cyclePauseOnHover:true"> .....images etc. </div>

the other issue is that I have the cycler open an image gallery, which is nice, but it continues cycling in the background behind it, which is not so nice.
Is there a way to pause it while it is in the background?
Administrator
Registered: Aug 2008
Posts: 3382
The data-fb-options attribute assigns settings to be used by the standard floatbox showing the gallery set. The cycler does not pick up its options from there. A good spot for the cycler options on your page might be in an fbPageOptions definition.

You can use the API functions fb.cycleStop and fb.cycleGo to pause the cycler while a floatbox is open.

As an unsolicited opinion, given the large size of the images in the cycler set you might prefer to not 'zoom' the images up and down when the floatbox starts. That is, it might look better with zoomSource set to null.

Taking all the above into account, consider placing the following fbPageOptions script on the page:
<script type="text/javascript">
fbPageOptions = {
cycleInterval: 8,
cycleFadeDuration: 3.5,
cyclePauseOnHover: true,
beforeBoxStart: fb.cycleStop,
afterBoxEnd: fb.cycleGo,
zoomSource: null
};
</script>
Member
Registered: Jul 2012
Posts: 4
thanks for your helpful hints
i added the zoomSource: null but i can't notice any difference and it still zoom animates.

as far as i can tell i did exactly what you specified:
http://www.bittleston.com/new/

i put all the options in fbPageOptions in a script on the page

but the cycler continues to cycle in the background when the box is open above it...?
Why is it ignoring the options?
Administrator
Registered: Aug 2008
Posts: 3382
zoomSource:null is working on your page. When the floatbox opens and closes, the images are no longer "zooming" up and down from the page to the box. The floatbox still animates to and from the mouse-click location when it opens and closes, but it is only the floatbox components that animate, not the image within it. That's what zoomSource:null does. You can turn off all the animations with doAnimations:false or just the resizing animation with resizeDuration:0 if that's the desired effect.

On your page, the options are specified in fbPageOptions, but they are also specified in the data-fb-options attribute on the cycler div as well. The ones applied directly to the div take precedence. Callback settings such as beforeBoxStart can accept a function reference or an executable string, but the function reference can be provided only when using javascript object notation such as is used in fbPageOptions. The data-fb-options setting must use an executable string because the attribute value is a string, not an object.

An executable string includes '()' to fire the function, whereas a function reference does not. On your page, you you can get the callbacks working by removing the data-fb-options attribute and thereby allowing the fbPageOptions to apply, or, you can change the beforeBoxStart and afterBoxEnd syntax in the data-fb-options attribute to fb.cycleStop() and fb.cycleGo().
Member
Registered: Jul 2012
Posts: 4
I made those changes:
removed the data-fb-options (except the group has to be in there)
and put everything else in fbPageOptions
and made the fb.cycleStop() and fb.cycleGo() executables as you said...
now they work well, no more cycling when the fb is open in front... but now it is completely ignoring
cycleInterval: 15,
cycleFadeDuration: 4,
the cycling seems to have defaulted back and these values have no effect...
Administrator
Registered: Aug 2008
Posts: 3382
You've got the cycleStop and cycleGo syntax wrong. When the callback values are strings, they need to be executable strings and so need to have the '()' brackets after the function name to call it. The callback values in fbPageOptions are not strings, they are direct function references, and should include only the function names. You want to assign the function as the callback. As things currently stand, you are executing the function and assigning the return value. Remove the brackets from cycleGo and cycleStop in your fbPageOptions definition. (Or, alternatively, put quotes around them to make them strings.)

Because you are currently calling rather than referencing cycleGo and cycleStop, errors are being thrown due to the cyclers not yet existing at the time fbPageOptions is processed. These errors prevent fbPageOptions from getting defined and so prevent the options set there from existing and being applied. Once those two entries are references rather than statements calling the function, all your options should work fine.

Page: 1