Child Overlay

Page: 1

Author Post
Member
Registered: Aug 2012
Posts: 22
Location: Bondi Beach Sydney Australia
Hi I am trying to control the settings of a child floatbox

But I cant remember how to do it

I would like the child floatbox to have the same option settings as the parent floatbox, except that I want it to hide the parent floatbox image and darken its background by 55%.

The parent floatbox background was set in custom CSS

#fbOverlay {
background-image: url(background.jpg);
}

and in the options.js

globalOptions: {

but where do i assign the child options, is that under

childBox: {

?

Thanks
Administrator
Registered: Aug 2008
Posts: 3382
The options can go on a 'data-fb-options' attribute on the link that opens the floatbox (or in the fb.start() parameters if the floatbox is being created by script).

A class could be assigned to the starting link and a corresponding section created in the classOptions section of options.js (version 6) or the className section of fbOptions.js (version 7).

The options.js file in version 6 has a 'childBox' section that will assign options only to secondary floatboxes - that is, ones that open while another floatbox is already showing. Version 7 does not support this 'childBox' pseudo-class, so it might be best to avoid using it if you expect to ever upgrade to the current version.
Member
Registered: Aug 2012
Posts: 22
Location: Bondi Beach Sydney Australia
Thanks, I am using v6

I tried v7 but I will have to spend some time to reconfigure defaults to make it look preferable and I couldnt get the css background to show. Is the custom background possible in v7?

With v6

I put the class="transparent" after the html link and it works well thanks!

<div class="floatbox" data-fb-options="width:1400 height:80%">
<a href="http://....." class="transparent">✦</a>
</div>


Can I add the transparent class with the first line div class instead of attaching it after every link. sometimes I will have many links.

Also when the second floatbox is opened can I hide the parent floatbox outer Xclose button and image but keep the 55% fade of the custom background.

Thanks!
Administrator
Registered: Aug 2008
Posts: 3382
I'll answer what I can understand of your questions here.

Yes, you can put the className "transparent" on a containing div and have the options assigned to that class inherited by the links within that div. (Could be faster to answer such questions by trying it.)

Sorry, I don't know what css background you are trying to show, but cannot.

There is no option that will reconfigure other floatboxes dynamically when a new floatbox opens. You could, if ambitious, try to hook into afterBoxStart and script some manipulation of other floatboxes, but no assistance is available for that as it is not a direct capability of the Floatbox package.
Member
Registered: Aug 2012
Posts: 22
Location: Bondi Beach Sydney Australia
Thanks!
I have everything working as i want now in v6
But with v7 i cant see the custom background

example v6: http://www.lotrarts.com/by-character

custom css:

#fbOverlay {
background-image: url(../castle.jpg);
}


I had updated the fbOptions.js global: {

with the same settings from the options.js globalOptions: {

In v7 the background is just a solid white.

Here is my v6 settings.
Should they work in the v7 global: {
<admin>
large quoted list of options removed.
</admin>
}
« Last edit by admin on Sun May 08, 2016 11:19 pm. »
Administrator
Registered: Aug 2008
Posts: 3382
It's important to read the change log for major releases to see what has changed and what might affect you. What works in earlier versions is not assured to work in new releases.

It's pretty safe to to carry forward options between minor releases of the same major version, but more care needs to be taken when moviing between major versions.

From the change log page:
Quote
New overlayBackgroundImage option will attach a repeating background image to the normally transluscent page overlay.

Also, failing to get a mention in the change log was the fact that the floatbox elements no longer get ids, such as #fbOverlay etc., assigned to them.


Correction: The removal of ids from the floatbox elements did make it into the change log.
Quote
The floatbox component elements no longer have ids assigned to them, and so should be fairly immune to false positives generated by overly-broad AdBlock lists.
« Last edit by admin on Sun May 08, 2016 11:59 pm. »

Page: 1