Золотая библиотека JAVASCRIPT Библиотека JAVASCRIPT + CSS
Золотая библиотека JAVASCRIPT Библиотека JAVASCRIPT + CSS
Золотая библиотека JAVASCRIPT Библиотека JAVASCRIPT + CSS
Золотая библиотека JAVASCRIPT

назад на главную страницу - клавиша Esc

Floatbox v3.50 - Programmer's API Reference

Variables and Properties


Floatbox's primary object is the global var "fb". All properties and functions are members of the fb object.

If you are running floatbox in a hierarchy of iframes, the fb objects in each child window are references to the fb object on the top document. (I.e., there is only one fb object even though there are multiple window objects.) An iframe displayed by floatbox that does not have floatbox.js included on its document will not have the global fb var in its window's scope. To programmatically use fb from such a child iframe, fetch it from the parent window by referring to it as "parent.fb".


Floatbox can display multiple boxes at one time, such as when displaying an info box over top of a displayed image. fb.lastChild always points to the top most box (the last one loaded). If there is only one box (or none displayed yet), fb.lastChild === fb.


For any given box, .parent points to the box immediately below it. For example, if 3 boxes are stacked up, fb.lastChild.parent will point to the middle box. fb.parent (fb always being the primary, bottom, first-loaded box) is identical to fb.

fb.children[ ]

fb.children is an array of pointers to however many stacked child boxes are currently open. When two boxes are open, fb.children will have length = 1 and fb.children[0] === fb.lastChild. The primary box, fb, does not have an entry in the .children array.

fb.anchors[ ]

fb.anchors is an array that holds associative arrays of information about anchors that have been "tagged" for handling by floatbox. If you need to clear out fb's memory of anchors it has seen, set fb.anchors.length = 0. You may want to do this if you are dynamically updating content on your page, want to run fb.tagAnchors (described below) to re-inventory the page, and don't want to keep old, now-removed, anchor information in the floatbox working set.


loadPageOnClose refreshes the browser when floatbox ends. You can dynamically set fb.loadPageOnClose to a url string to naviagate to the url, the word "self" to reload the current top page, or the word "back" to invoke history.back(). The onEvent callbacks described below may be more useful.


fbContent is the document node holding the content that is displayed by floatbox. It may be an img, iframe, or div depending on what kind of content is currently showing. Having this node reference can be helpful when dynamically working with floatboxed iframe or div html content.


fb.start( { href: 'strURL', rev: 'strOptions', title: 'strTitle' } )
fb.start( anchor )

fb.start is how you programmatically launch a floatbox without the need for a user's onclick action. fb.start is overloaded. The first way to use it is to pass an anchor element - fb.start(document.getElementById('someAnchorsId')). The anchor does not have to be pre-tagged by fb.tagAnchors(). The more common way to use it is to pass an associative array that mimics an anchor's attributes - fb.start({ href:'someUrl.html', rev:'option1:value1 option2:value2', title:'a title' }). When passed an associative array, only the href member is mandatory. Use the option "sameBox:true" to load new content in an existing floatbox without invoking a new box.

fb.end( )

Call fb.end() to close a running floatbox. With multiple stacked boxes, only the top-most floatbox will close regardless of which box's end function was called. To close all stacked boxes at once, call fb.end(true).

fb.tagAnchors( node )

When you dynamically add floatbox-enabled anchors to a page - through AJAX or any other method - you need to run fb.tagAnchors against the new content. Doing so adds the new anchors to floatbox's inventory, and sets the onclick action for those anchors. It is more effecient to pass a div node that contains the new content to tagAnchors: fb.tagAnchors(document.getElementById('myDiv')). There is no harm done if you re-tag the entire document with fb.tagAnchors(document). You can clear pre-existing anchor records out of floatbox's inventory with fb.anchors.length = 0 prior to making the tagAnchors call.

fb.tagOneAnchor( node, true )

tagOneAnchor is overloaded. The "node" parameter can be a true anchor node, or it can be an associative array that mimics an anchor's attributes. Example: You could dynamically add a new member to a grouped set of floatbox items with the following:
fb.tagOneAnchor( { href:'someImage.jpg', rev:'group:myGroupName' }, true );

fb.resize( width, height )

Resizes the top-most running floatbox to the new requested dimensions. Width and height are the new content dimensions in pixels, not including the box decoration around the content.

fb.goBack( )

If a previous item has been displayed in the top-most running box, either because a gallery set is running or you have updated content with fb.start and sameBox:true, fb.goBack will reload the item displayed immediately prior to the current item.

fb.getIframeDocument( node )
fb.getIframeWindow( node )

These functions return an iframe's document object and window object respectively. Node is an optional parameter. If provided, it must be an iframe node. If node is not passed, fb.lastChild.fbContent is assumed and the document or window object for that top-most iframe is returned. Example: If three stacked boxes are open and you need to talk to the middle one, you can get its document with var doc = fb.getIframeDocument(fb.lastChild.parent.fbContent). Or, more simply, to get the document object for an iframe in the only running floatbox, var doc = fb.getIframeDocument( ).

fb.loadAnchor( href, rev, title )

fb.loadAnchor is deprecated in favor of fb.start( ), but it still works.

Event Callbacks

Floatbox will look for callback functions that you define for the following events:
beforeBoxStart, afterBoxStart, onItemStart, onItemEnd, beforeBoxEnd, afterBoxEnd, onPrint.
Code is assigned as options with those names in the standard options setting manner. Callbacks defined in a page's fbPageOptions definition can be either true javascript functions or strings to be eval'd. By their nature, callbacks defined as options in an anchor's rev tag will be strings.

Example - A function callback in the page options: fbPageOptions = { beforeBoxStart: function( { alert( 'eat a peach' ); } ) }

And a string callback in an anchor's rev options: <a href="xyz.php" class="floatbox" rev="onItemEnd:`alert( 'eat a peach' )`">talk about fruit</a>
(Don't forget the back-quotes. They're required for correct parsing.)