Floatbox v3.24 - Instructions

randomous.com

Index
Basic quick-start

The three steps below are all you need to get floatboxed content on your pages. But to get the most out of floatbox and use its more advance features you really should read the rest of these instructions, the options reference and check out the demo pages.

  1. Extract everything that's in the zip file's "floatbox" folder to a "floatbox" folder at the root of your site. Keep the folder structure intact.
  2. Include the following two lines in the <head> section of the pages you want floatbox to be active on:
    <link type="text/css" rel="stylesheet" href="/floatbox/floatbox.css" />
    <script type="text/javascript" src="/floatbox/floatbox.js"></script>
  3. Add a rel attribute of rel="floatbox" to the <a> elements you want to show in floatbox. Append a unique string to the end of the rel attribute to group items into a collection. E.g., if you put rel="floatboxGroup" on multiple items, they will be shown in a floatbox with prev/next buttons to navigate through them.
  4. There is no step 4. You're done. But keep reading to understand how to do more than just the basics with floatbox.

Back to Index

Installation & updating

The basic install described above gives you a floatbox folder at the root of your site with all the floatbox files inside that. IMPORTANT: Many people seem to misinterpret what is meant by the "root folder of your site". This is the folder that corresponds to the base URL of your site - e.g., "http://yourdomain.com/" It is not the base folder of your project inside your site, nor is it the folder containing your current html page. IMPORTANT: If you place the floatbox files in a different folder than your site's root folder you need to change the "urlGraphics" and "urlLanguages" paths defined in the options section of the floatbox.js file and also modify the floatbox.js and floatbox.css include paths in your page headers.

The core floatbox files are floatbox.js, floatbox.css and the contents of the graphics and languages folders. The "compressed" folder contains - you guessed it - compressed floatbox files. You can use these in place of the uncompressed originals if you want to minimize the code load from your site. See the readme.txt file inside the "compressed" folder for more details. Framebox.js is for constraining the floatbox display to a particular frame or iframe. See below for details. The docs folder contains a copy of these instructions, the floatbox options reference, and a fully commented source version of the floatbox code.

Upgrading to a new version of floatbox entails replacing the entire contents of the floatbox folder. The css, graphics and languages can all change between versions along with the javascript. All the components need to be in sync. If you have customized the floatbox.css file, you should manually re-customize the new css file (or better yet, move those customizations to a seperate css file). You will need to edit the options section at the top of floatbox.js to set your default preferences with each install or update.
Back to Index

Doc Types

Floatbox does not support quirks mode. All pages that include floatbox content need to have a valid doctype declaration at the top of the page which will set the browser to render in standards-compliant mode. Note that for IE6, if anything at all appears above the doctype declaration, quirks mode will be set. So please don't put an xml declaration such as <xml version="1.0" encoding="utf-8"?> at the top of your XHMTL 1.0 pages.
Back to Index

Setting rel attributes

The basics of activating floatbox by setting rel="floatbox" attributes on <a> elements is given above in the quick-start section. The extra text on the end of a rel attribute that is used to group items into collections can be any string you like. The resulting rel attribute just needs to be identical for all items you want grouped. Although you can use it, you may want to avoid the square brackets commonly used by other scripts because a rel attribute like "floatbox[group]" won't pass xhtml validation.

For backwards compatability with previous floatbox versions and some other lightbox clones, the following rel attributes are also recognized: "gallery", "slideshow", "iframe", "lytebox", "lightbox", "lyteshow" and "lyteframe". If your pages are already set up with these rel attributes, you don't need to change them over to rel="floatbox" if you don't want to. Version 3+ of floatbox auto-detects content type based on the href url and does not need to be told the content type by way of the rel attribute. (You can override, or assist, the auto-detection of content type by setting the "type" option in the rev tag. Rev attribute options are described a little further down.)

Note: you can use the rel="slideshow" attribute to trigger a slideshow but it is often better to set the page up as one or more multi-item galleries and then set the 'doSlideshow' option to run it as a slideshow. See the "Start a slideshow" example below for more on this.

Here's some example anchors with rel attributes configured to load in floatbox:

Back to Index

Configure options

There are 5 different ways to set configuration options for floatbox. The order of precedence for these options is given in the following list where the lower numbered items override options set by means of higher numbered methods.

  1. querystring from the host page url (good for testing)
  2. options from the clicked link's rev attribute
  3. from cookies set by an external form or other code
  4. fbPageOptions object defined on the host page
  5. those defined in the defaultOptions object at the top of floatbox.js

Your first stop in configuring floatbox will probably be to edit the options section at the top of floatbox.js to set the default global options the way you like them. Details of the other various option-setting methods follow. Note that option names and values are case-sensitive.
Back to Index

Set options directly on anchors

Probably the most useful of floatboxes options setting techniques is the ability to configure the behaviour of specific anchors. Nearly all the options described in the options reference page can be set on an anchor's rev attribute. Setting options directly on an anchor makes those floatbox options active only when that particular link is clicked. Syntax is <a href="" rel="floatbox" rev="option1:value1 option2:value2 etc.">. You can see a more detailed example below where starting a slideshow is discussed.
Back to Index

Setting page-specific options

All the default options listed at the top of floatbox.js can be overridden for a specific page by including an object definition called "fbPageOptions" in the head section of that page. You could for example set a specific theme, animation values and navigation types for a for a page of floatboxed content with the following page-specific javascript object:
<script type="text/javascript">
  fbPageOptions = {
    theme: blue,
    resizeDuration: 5.5,
    imageFadeDuration: 4.5,
    overlayFadeDuration: 0,
    navType: 'both'
  };
</script>
 Note the syntax: there are commas after each name:value pair except for the last one. When running floatbox from iframed pages, the fbPageOptions object definition needs to be in the head section of the top document.
Back to Index

Setting options from cookies or a url querystring

The ability to manage configuration options through cookies is useful for something like the options form on my demo pages. You can use cookie-based options to provide user control over the behaviour and appearance of floatbox. Briefly, the config options are available for reading and/or writing in a session cookie called "fbOptions" with an internal structure of "option1:value1 option2:value2 etc.". Dissect the "Set Options" form on the demo pages for an example of cookies in action. You will need to enable cookie support by setting "enableCookies" to true, either in the top of floatbox.js or in a page-specific fbPageOptions object. If you are trying out different options in floatbox.js you might want to set enableCookies to false, otherwise your config changes won't take hold without restarting your browser (thereby clearing session cookies).

Setting options in the url querystring is useful primarily for testing purposes. You can for example add something like this to your address bar's url:
http://.....?theme=yellow&resizeDuration=5&outerBorder=10
Back to Index

Example: Start a slideshow from a link

If an anchor has "doSlideshow:true" set on its rev attribute then, when clicked, the corresponding grouped images (or other content) will be shown as a slideshow. This allows for setting up a gallery with a dedicated link to viewing that gallery as a slideshow. When you do this, you would normally want to include the option "showThis:false" so that the activating link itself is not included in the invoked slideshow.

For an example of doSlideshow in action, look at the galleries on the randomous.com site. They all have a slideshow option at the top of their pages. The anchor element that enables the slideshow looks like this:
<a href="" rel="floatbox.group" rev="doSlideshow:true showThis:false endTask:exit autoResize:true navType:none">Slideshow</a>
The images that will be included in the slideshow are those that have the same rel attribute (in this case, "floatbox.group") on their associated <a> elements. If the href in the slideshow anchor matches one in the image gallery collection, the slideshow will start with that image.
Back to Index

Captions

There are two ways to get floatbox to display caption text. One is to set the 'title' attribute on the <a> element and the other is to include a 'caption' entry in the rev attribute options. Browsers use the title attribute as a tooltip when the user mouses over an anchor. If you want the tooltip and the floatbox caption to be the same, just set the title attribute. If you want them to be different, put the caption string into the rev attribute as an option (see below). When using the rev caption option, you need to surround the caption text with backquotes (`).

Here's two examples:

If you set the title or caption option to the string "href", the displayed caption will be the value of the anchor's href attribute. This can be useful when displaying iframed content or if you want to display the path/filename of the current image.

The rev caption can include html styles and elements such as <br /> or even <a>nchors if you like. HTML entity characters (& " < >) in a caption will need to be encoded (&amp; &quot; &lt; &gt;).

There's examples of html styled captions on the demo page.
Back to Index

HTML content: iFrames, AJAX & inline DIVs

Floatbox handles 3 broad categories of content: images, html and multi-media. This section describes handling html content. There are 3 ways to load html into a floatbox: as an iframe, using AJAX, and using content from inline hidden DIVs. Standard anchor hrefs that aren't recognized as an image or multi-media type will be loaded as iframe content by default. To load that html content with AJAX, you need to put "type:ajax" in the anchor's rev attribute. To load content from an inline div, give that div a unique ID and reference that div in the anchor's href attribute preceeded by "#" (e.g., href="#myDiv"). See below for examples.

If you are loading forms or active content that includes links or calls floatbox functions, use an iframe to display that content. With AJAX or inline content floatbox's keyboard handler will interfere with forms and prevent use of tabs, spaces and arrow keys. Links clicked from within AJAX and DIV content will navigate the base page to the new link whereas links in iframed content will open inside the floatbox. AJAX and inline DIVs are good for displaying static content that does not have form fields or links.

You can group multiple html-content pages together using the usual rel postfix syntax such as "floatbox.group" or "floatbox7". There are three rev options that should be assigned to each non-image anchor: "width", "height" and "srcolling". Width and height are the numeric size of the iframe window in pixels. One or both of width and height can be specified as "max" which will set that dimension to match the current window size. Width and height can also be expressed as percentages and will size to that percentage of the available displayable screen area (e.g, rev="width:90%"). Scrolling is either "no", for no scrollbars, or "auto" for displaying scrollbars in the iframe if they are required. If no value for scrolling is given, auto is assumed.

Here's some examples of anchor tags that load html content:
IFrame: <a href="mypage.html" rel="floatbox" rev="width:400 height:530 scrolling:no">...</a>
AJAX: <a href="mypage.html" rel="floatbox" rev="type:ajax width:400 height:530 scrolling:no">...</a>
Inline DIV: <a href="#divID" rel="floatbox" rev="width:400 height:530 scrolling:no">...</a>
For compatability with pre-existing lytebox pages you can also use the css-like syntax for the rev options if you wish:
<a href="mypage.html" rel="floatbox" rev="width: 400px; height: 530px; scrolling: no;">...</a>

The following section gives information about loading multimedia content, either directly or as iframe content.
Back to Index

Multimedia: Flash, QuickTime, YouTube, etc.

Multi-media content type is recognized by floatbox based on the file extension in an anchor's href. .swf files will be loaded with the flash plugin and .mov .mpg .mpeg and .movie extensions will be loaded with the QuickTime plugin. Additionally, you can load floatbox content directly from online video services such as YouTube, Yahoo Video, Google Video, MSN Soapbox and others. If the required plugin is not available on the client browser, floatbox will display a notice (in English) with a link to the plugin download page.

For flash content, floatbox assigns the following parameter values: wmode=opaque, bgcolor=none, scale=exactfit. You can over-ride these settings by providing new values in the href url's querystring.
e.g., <a href="myflash.swf?wmode=window&bgcolor=#ffffff&scale=default" rel="floatbox" rev="width:320 height:240 scrolling:no">...</a>
To work around some Firefox/flash display bugs, wmode values are forced for Firefox and cannot be overridden. FF2 will always have wmode=opaque and FF3 will always have wmode=window. If your flash object requires flashvars to be set, you can put these flashvars in the href url's querystring. Flash always treats flashvars and querystring vars equivalently and it doesn't matter in which location the settings appear.

Parameter control for QuickTime content is not provided. If you need more control over the QuickTime config, wrap it in html and load it as iframe. (See below for more detail.)

Most online video services are recognized as flash content because they load their videos using the .swf file extension. YouTube is an exception, but it too is recognized as flash content by floatbox. A YouTube href will look something like this: "http://youtube.com/v/lj3iNxZ8Dww&hl=en". Please see the Multimedia section on the demo page for examples of direct loading flash, quicktime and online services.

Although floatbox will display multi-media content natively, there may be times when you want more control. If so, you can put your multimedia content into an html page and thereby load that page as an iframe. You will want to make sure your document body has no margin or padding: <body style="margin: 0; padding 0;"> Then set the iframe width and height to the exact dimensions of your multi-media object and add "scrolling:no" to your rev tag.

There's a sample on the demo page.
Back to Index

Auto Gallery creation

The "normal" way to create an image gallery for floatbox is to add a rev attribute like "floatbox.pix" to each image link you want added to the gallery. You can auto-create a floatbox gallery without adding these rev attributes. To do so, include floatbox.js and floatbox.css in the usual fashion and set up a fbPageOptions object that contains "autoGallery:true". This will cause the tagAnchors function to assign a rel attribute of "floatbox.autoGallery" to every link on the page that points to an image. These images will then be loaded into floatbox as a group. If you have a few image links that you want excluded from the autoGallery group, you can exclude them by pre-setting a rel attribute of rel="nofloatbox" on the ones to be ignored. (Note: you can set autoGallery:true in the options section of floatbox.js. This will turn every page that you include floatbox on into an auto-gallery page.)

You can set a title on each image link as well. Do this by setting the autoTitle option to your desired title string. This title will be shown as a caption in the floatbox display. (Note that titles set on individual links will take precedence when the captions are setup.) Also, if you want to include a slideshow link to the auto-created gallery, do so in the normal fashion as described in this example and use a rel attribute of rel="floatbox.autoGallery".

The fbPageOptions object definition for an autoGallery would look something like this:
<script type="text/javascript">
  fbPageOptions = {
    autoGallery: true,
    autoTitle: 'This is a caption on every image'
  };
</script>
 Back to Index

Programming active content

Floatbox has 5 functions that allow you to start, end, modify floatbox contents and initialize new content. (Note that in some contexts, like from inside a floatbox iframe, you will need to use "parent.fb..." instead of just "fb..." to call these functions.)

fb.loadAnchor(href, rev, title)
Use fb.loadAnchor to launch floatbox from javascript code on your page or to change content from an existing floatbox. The three parameters are the same values you would configure on a standard clickable anchor. Only the first, "href", is mandatory. Alternatively, you can pass an anchor node to loadAnchor - something like:
fb.loadAnchor(document.getElementById('someID')).
If you are calling loadAnchor from an existing floatbox the default action is to open in a new floatbox over top of the existing one. To re-use the current floatbox instead, use the "sameBox:true" option in the rev parameter.
Note that you can load floatbox content from a flash button with ActionScript that looks something like this:
on(release) {
  getURL("javascript:fb.loadAnchor('myPage.html', 'width:600 height:max')");
}

fb.goBack()
Reloads the previously displayed content in the current floatbox.

fb.resize(width, height)
Resize the current floatbox without changing the content or other settings. Parameters can be numeric integers (no "px" on them please), "max", or percentage like "92%".

fb.end()
Closes the top-most floatbox. Use fb.end(true) to close all stacked floatboxes at once.

fb.tagAnchors(baseEl)
Floatbox always runs this on page load to set up the floatboxed anchors. If you do something that dynamically adds new floatbox anchors to the page after load time (usually this will be done through AJAX), you will need to invoke fb.tagAnchors to activate those new anchors. The baseEl parameter is the element that contains the new anchors. If you want to be lazy you can just pass it "document.body" and retag the whole page. It's more efficient to give the div containing the new content an id and call something like fb.tagAnchors(document.getElementById('myID')).

There are some variables that may be useful if you are scripting floatbox. In stacked (multiple) floatboxes, fb points to the bottom/first floatbox object, fb.lastChild always points to the topmost floatbox, .fbParent points to the box immediately beneath the one being referenced, and the fb.children array contains pointers to each active child floatbox in order.

A note on the fb.loadAnchor function: This always loads a standalone item and cannot be used to invoke a gallery of grouped items. If you need to programmatically invoke a gallery group, here's how you do it. Have the group already setup as anchors with the appropriate rel and rev attributes on the host page. These anchors don't need to display content - they can be empty if you like. Give the item of interest (usually the first one) a unique "id" attribute. You can now launch your gallery with a call of fb.start(document.getElementByID('myUniqueID'));

See the demo page for some examples of these functions in action.
Back to Index

Alternate content for javascript-disabled browsers

You may wish to provide alternate content for users who have javascript disabled in their browsers. If your page is setup to display images in floatbox but javascript is disabled, clicking on the image link will simply display that image on a blank page. To provide a more friendly experience in this case, you can set the link's href attribute to point to your friendly non-javascript content and use floatbox's "href" option in the rev attribute to provide the image path to floatbox. A floatboxed link with alternate content might look like this:
<a href="altGallery.html" rel="floatbox" rev="href:`myImage.jpg`"><img src="myThumbnail.jpg" /></a>
In this case, when myThumbnail.jpg is clicked floatbox will display myImage.jpg and javascript-disabled browsers will navigate to the altGallery.html page.
Back to Index

You can configure anchors to have a popup thumbnail that appears when the mouse is over the anchor and disappears when the mouse moves off. The popup thumbnails can be clicked to load an associated image in floatbox. Combining popup thumbnails with floatbox's ability to zoom from a thumbnail to an image makes for a nice effect. Popup thumbnails are enabled by assigning a class of "fbPopup" to the <a>nchor element. Here's an example:
<a class="fbPopup" href="myImage.jpg" rel="floatbox">clickable text<img src="myThumbnail.jpg" /></a>
Popup thumbnails set with fbPopup appear just above the hovered anchor. If you prefer the thumbnails to show below the anchor, use a class of fbPopdown instead.

As usual, there's a sample on the demo page.
Back to Index

Info box for secondary content

There are occasions when it is helpful to display additional information about your floatbox content. For photogrpahs, this might be descriptive text, EXIF information or a popup location map. Forms or other html content may have associated help or other information that can be effectively presented in a second floatbox. Floatbox's info box capability addresses this usage. When enabled, a link will appear in the lower left of the floatbox frame which activates the information box.

There are three option tags you can put in your anchor's rev attribute to enable and configure an info box.
1) Assign the url that points to the information source using the rev option "info". E.g., "info:myInfoPage.html" or "info:#myInfoDiv".
2) Set floatbox options for the secondary info box using the rev option "infoOptions". E.g., "infoOptions:`theme:white width:400 height:300`". (Note that the backquotes are required to enable correct parsing.)
3) By default the link in the floatbox frame will display the text "Info..." or its localized language equivalent. You can override this with the "infoText" option. E.g., "infoText:`EXIF data...`".

A complete anchor with an associated info box could look like this:
<a href="myPhoto.jpg" rel="floatbox" rev="info:#myInfoDiv infoOptions:`theme:white width:400 height:300`">click here</a>

Yes, there's an example on the demo page.
Back to Index

Print contents

If you set "showPrint:true" in a floatboxed anchor's rev attribute, a "Print..." link will be shown in the info panel area. When clicked, this link will invoke a second browser instance that will display just the contents of the floatbox window and will show the print dialog for this new browser instance. The contents that will be printed will be just that from the floatbox display, not the surrounding eye candy and not the host page content.

In some circumstances you may find that you want to add css styling to the print window contents. You can do this with the printCSS rev tag option. If printCSS is a URL path to a css file, that css file will be attached to the print window. Or you can just put css syntax directly into this rev option, surrounded by backquotes. For example: rev="showPrint:true printCSS:/css/print.css" or rev="showPrint:true printCSS:`p {font-size: 11px;} etc...`" You usually don't need to add any css stuff for printing, but it's there if you need it.

As usual, see the demo page for an example.
Back to Index

Galleries of multiple images (or other content) can have a series of simple numbered links shown either in the info panel or control panel. If there are thumbnails associated with linked images, these thumbnails will be displayed as small popups when the numbered link is hovered with the mouse.

Primary control over the display of index links is done with the numIndexLinks option. If this is zero, index links will not be shown. If it is -1, there is no limit on the number of index links shown - there will be a link for each image in the gallery group. Any positive integer and the number of links shown will be limited to this amount (in case you don't want a huge list of numbered links for your gallery of 479 pictures).

Two other options affect index links. You can turn off the thumbnail popups by setting showIndexThumbs to false. The location of the index links is controlled by the indexLinksPanel option. Set this to 'control' to put index links in with the control widgets, or set it to 'info' to put the links in with the caption and other goodies.

You can see index links in action on the "Include Index Links" sample on the demo page.
Back to Index

Auto-start and exit tasks

You can have floatbox content appear directly on page load by using the autoStart rev option. Put "autoStart:true" into the rev attribute of the floatboxed enabled item that you want to run automatically. As soon as the page loads, floatbox will startup with this item displayed. You can use "autoStart:once" to have that tagged item display only on the first page load of the session. Doing this sets a session cookie when the item is first shown and that item will not be auto-shown again as long as that session cookie is present.

You can also invoke an auto-start through a query string on the url used to invoke the page. For example, a url of "http://mydomain.com/mypage.html?autoStart=myimage.jpg" will auto-start myimage.jpg provided there is an anchor on the page that is setup for floatbox and has that image as its href value. Note that the query string value only has to match the right-hand side of the anchor's href. The given example would match an href of "/images/this_is_myimage.jpg".

Floatbox can automatically load or reload a web page in the browser when it exits. The "loadPageOnClose" option is used to make this happen. Set loadPageOnClose to the string 'self' to refresh the host page on exit. This can be useful if your floatboxed content has modified some back-end content and the host page needs to be refreshed to reflect the changes. If you set loadPageOnClose to the string 'back', the previous page in the browser's history list will be loaded. This is used in the APOD slideshow on the demo page. If loadPageOnClose is neither 'self' nor 'back', it is assumed to be a valid url and the browser will be instructed to load that page. If you set loadPageOnClose to a url inside a rev tag option string, you must surround the url with backquotes (`) so as not to break parsing of the option string.
Back to Index

Image map areas

Floatbox can work with image map areas the same way it does for standard <a> elements. To do this, set up the rel, rev and title attributes as described above, but for image maps these attributes go on the map's <area> elements. There's an example on the demo page.

Note that attaching floatbox to image map areas results in xhtml that will not validate. This is because the rel, rev and title attributes are not allowed attributes of <area> elements in the html spec. It is still safe to do as all browsers ignore unknown attributes, but it is an unfortunate and unavoidable downside of providing image map support in floatbox.
Back to Index

Floatbox includes controls for moving to previous and next items in a group, resizing, playing and pausing a slideshow, and exiting. These controls are graphical and loaded from the graphics folder. If the configuration setting "graphicsType" in the floatbox.js file is set to the default "auto", browsers that are configured with a localized language other than English will see graphics-only controls. Localized English browsers will see control graphics that include English words.

There are two sets of previous/next controls for grouped items. The upper navigation set displays small graphics on top of the displayed image when the mouse is over the left or right side of then image. Lower navigation displays a clickable << prev || next >> (or the international equivalent) in the panel below the content. You can use either or both of this by setting the navType option. My favourite setting is to set navType to "both" but set showUpperNav to "never". This allows navigation to occur by clicking on the image (or on the lower nav control) but does not display the popup graphic over top of the image.

When the floatbox content has been shrunk from its native size to fit the screen, or when it is displayed larger than the current screen size, a resize control will be displayed which can be used to toggle the item's size. The "resizeTool" option controls whether the resize control will be a custom maginfying-glass cursor or a small graphic in the top left corner. If the custom cursor is used, it is active only in the space between the two upper navigation areas. Opera always gets the graphic in the top left corner because it can't do custom cursors.

When the enableKeyboardNav option is set to true, the following keys can be used in place of mouse-clicking the controls:

If the Ctrl key is used together with the left or right arrow, floatbox will jump 5 items ahead or back in the sequence. This is to facilitate quick navigation when using floatbox as a poor-man's PowerPoint.
Back to Index

Appearance

There's lots of control over floatbox's appearance. You can set the colors, border sizes, display of controls, shadow effect, transparencies and various animation effects through the configuration options. Most of the General options, some of the Navigation options, and all of the Animation options are for configuring appearance. See the options reference for details on the use of these (and other) options.
Back to Index

Custom background image

You can use a graphic as an overlay background image by providing a background-image style for the overlay element. In a css file, it would look something like this:
#fbOverlay {
    background-image: url(bkgrnd.gif);
}
 You can place the background directive in an external css file together with the appropriate include in the head section of your page, or you can put it directly inside a <style type="text/css"></style> section in the page head. Of course, background-image can also be added to floatbox.css if you want it universally applied, but this will prove to be a pain when you upgrade to a new version.

If you use a custom background image you may want to set overlayOpacity to 100, or maybe play with lower values to fade the background image. For an example of a custom background and the use of autoStart and loadPageOnClose, check out the APOD slideshow on the demo page.
Back to Index

Running in iFramed pages

You can run floatbox from iframed pages if you like, and those iframes can be nested as deep as you want. Floatbox.js and floatbox.css need to be included in the root (top) page and on every page in a nested chain down to and including the last child page that has floatbox content on it. For example, if you have a page with iframes nested two deep and floatbox content only in the deepest iframe, you still need floatbox.js and floatbox.css included in the deep iframe, the parent of that iframe, and the root document. The css file has to be included in the root page, but does not need to be on the child pages. (See the iframed demo page for an example of a floatbox-enabled page with iframes nested two deep.)

Note that browsers restrict cross-site scripting. Floatbox (and any other lightbox-type script) will not be able to function from within an iframe if the top page and iframed child page do not have identical host name portions of their URLs. (You can use framebox.js in these circumstances. See below.)
Back to Index

Constraining floatbox to a particular iFrame

Floatbox normally occupies the entire browser window when displaying content by attaching itself to the top document. You can, if you like, have floatbox appear only inside a particular iframe and constrain itself to the dimensions of that iframe (or to a frameset child document). To do this, include the file framebox.js, instead of floatbox.js, in the head section of the iframe content document and also include floatbox.css.
<link type="text/css" rel="stylesheet" href="/floatbox/floatbox.css" />
<script type="text/javascript" src="/floatbox/framebox.js"></script>
Framebox.js attaches itself to the current window's document, rather than the top document.
Back to Index

Enjoy