Demo/Test
Samples of things you can do with Floatbox. Below each sample is the html code used to generate it.

Video (and Flash)
Floatbox is the best and easiest way to present and view HTML5 and Flash video, whether served locally or from YouTube or Vimeo.

Floatbox's built-in HTML5 video player will play MP4 and WEBM videos from a single direct reference and will automatically fallback to Flash using Flowplayer for browsers that can't handle HTML5. The combination of HTML5 and Flash playback means your videos are viewable on just about all browsers in use today, both old and new.

Floatbox Player for HTML5 and Flash video

Setup an HTML5 video source by placing MP4 and WEBM source files of the same name (but different extensions) in a folder. Create a standard floatbox link with the MP4 file path as the link's href. Voila: HTML5 video with Flash fallback. The Flash player will be loaded from the Flowplayer site if required. Place a .jpg file of the same name in the folder and it will be used as the video start-up poster on mobile devices.

Got bandwidth? Try it in HD
<a href="matt_360.mp4" class="floatbox" data-fb-options="width:640 addPlayButton:medium">Floatbox Player</a>
<a href="matt_720.mp4" class="floatbox" data-fb-options="width:1280">HD</a>
YouTube iframe embedded player

To invoke the YouTube video embed player, setup a floatboxed link with an href path format of either http://www.youtube.com/watch?v=msSc7Mv0QHY or the shorter http://youtu.be/msSc7Mv0QHY. Add "width" and "height" options appropriate to the video being shown. The "addVideoThumb" option will fetch a thumbnail from the YouTube service and hide its ugly horizontal black bars.

<a href="http://youtu.be/WTAHzO1i6Mw" class="floatbox" data-fb-options="addVideoThumb:192">YouTube Player</a>
Vimeo iframe embedded player

Link to a Vimeo video by using the video's id in a simple href path like http://vimeo.com/22542345. Vimeo links do not need width and height set in the options. Floatbox will retrieve and use sizing information provided by Vimeo's API. The "addVideoThumb" option can be used with Vimeo to fetch and add a thumbnail to your link.

<a href="http://vimeo.com/15795860" class="floatbox">Vimeo Player</a>
Video from other online services

Floatbox can show iframe video embeds from any online service, not just YouTube and Vimeo. Add "type:video" to the options to let Floatbox know that the remote page is a video and not a standard iframe page. Here's "Son of a Preacher Man" shown from dailymotion.com. Be forewarned that dailymotion sometimes shows ads before their videos.

<a href="http://www.dailymotion.com/embed/video/x5lqhn" class="naked floatbox" data-fb-options="type:video width:360 height:270 addPlayButton:small">Other video</a>
Flash content (.SWF files)

Floatbox can be used for reliable presentation of Adobe Flash content from .swf files. It is a good candidate for showing small Flash-based games, Flash animated photo galleries, and other content such as this oddly disturbing Tetka demo. Also check out the full-featured API function fb.flashObject() for easy creation of cross-browser Flash objects placed directly in the base page content.

<a href="/content/tetka.swf" class="floatbox" data-fb-options="width:80% height:70%w">Flash content</a>

HTML Content
Floatbox can show any valid HTML content from a variety of sources, which means that anything that can be rendered by the browser can be displayed in a floatbox. It's a powerful way to present forms and other content without navigating away from the underlying page. HTML content can come in as an iframe element, via an AJAX fetch, retrieved from an inline hidden div on the main page, or as a direct string of HTML markup.

Iframe content

First up on the HTML demo hit parade is iframe content. Dependable iframe content support enables Floatbox to show absolutely anything the browser can display. If the content can be shown on a page, and placement in an iframe is not blocked by the content, it can be presented in a floatbox.

Floatbox Instructions presented as iframe content
CKEditor: a fine little open source HTML editor
An interactive RSS newsfeed page running in an iframe
<a href="/content/instructions.html" class="floatbox" data-fb-options="width:650 showNewWindow:true showPrint:true enableDragResize:true">Floatbox Instructions</a>
<a href="/content/ckeditor" class="floatbox" data-fb-options="width:800 height:600 contentScroll:false boxScroll:false caption:#ckeditor">CKEditor</a>
<a href="/content/newsfeed/" class="alt floatbox" data-fb-options="width:420 height:200 colorTheme:silver">RSS newsfeed</a>
Other HTML content sources

In addition to iframes, Floatbox can show HTML content that is fetched by an AJAX call, imported from a hidden div on the base page, or specified as a direct string of HTML markup. AJAX content is great for dynamic, context-sensitive content — anything that can be delivered by a server-side engine such as PHP or ASP.NET. Hidden div content is loaded with the base page and so is very quick to display when moved into a floatbox. Directly specified HTML markup is an advanced technique normally delivered through the Floatbox API fb.start() function and can be a good way to specify content on javascript-driven pages.

AJAX content: How's the weather where you are?
Hidden div: Content already residing on this page, with lots of options to make it pretty

(See the "direct HTML" example on the Hi-Tech tab for stringified content loaded via the javascript API.)

<a href="weather.php" class="floatbox" data-fb-options="type:ajax width:666 height:245 contentScroll:false">AJAX content</a>
<a href="#div_id" class="floatbox" data-fb-options="contentBackgroundColor:#034c41 boxColor:#083731 innerBorderColor:#3e0e02 overlayColor:grey colorTheme:red innerBorder:3 outerBorder:0 captionPos:tc">Hidden div</a>

Here's some non-modal floatboxes to play with. Load more than one at a time and you can switch between the boxes, move them, resize them, and basically use them as a multi-windowed system for web pages.

<div class="floatbox" data-fb-options="modal:false width:280
  enableDragResize:true boxScroll:false cornerRadius:4 padding:12
  colorTheme:yellow contentBackgroundColor:#ffffe7"
>
  <a href="#nonmodal1" data-fb-options="boxTop:200 boxLeft:+66%">sample #1</a>
  <a href="#nonmodal2" data-fb-options="boxTop:150 boxLeft:+33%">sample #2</a>
  <a href="#nonmodal3" data-fb-options="boxTop:100">sample #3</a>
</div>
Corfu Panorama!

Floatbox is a great way to present panoramas and virtual tours. This one is content from an external domain (krpano.com) running as a Floatbox iframe. (It may take a few seconds to load.)

<a href="http://krpano.com/tours/corfu/" class="floatbox" data-fb-options="width:max caption:#krpano">
Corfu Panorama!<br/><img src="corfu_pano_thm.jpg"/></a>
PDF documents

Browser support for display of PDF files is spotty and Floatbox can't change that, but it will do its best by showing a PDF file as an iframe source. Some modern browsers will handle the document natively, others might render it with an installed plugin, and some browsers may offer to download the file. As an alternative to displaying PDF files directly, consider converting the document to HTML using one of the many available conversion tools, or publishing the document to scribd.com as shown in the following example.

<a href="/content/parameters.pdf#page=5&navpanes=0" class="floatbox">PDF documents</a>
Scribd hosted document service

The scribd.com online document publishing and sharing service is far from perfect, but it does a pretty good job of presenting documents in a manner that all browsers can render. A document (PDF, MS Office, Open Office, etc.) can be uploaded to Scribd and then shown directly from there with Floatbox. Use the scribd.com document page URL as the href value in a floatbox link, as shown in the example code below.

<a href="http://www.scribd.com/doc/100538359/" class="floatbox">Scribd hosted document</a>

Forms
Floatbox simplifies and rationalizes the deployment and processing of HTML forms by offering clean and intuitive presentation and powerful yet simple submission support in the Floatbox API. Forms are a subset of HTML content and can be brought into a floatbox from a standalone page as iFrame content or from one of the other HTML content sources as demo'd over there under the "HTML" tab. My favourite approach, due to its cleanliness and versatility, is to use AJAX for both the loading of the form and processing its submission.

AJAX form handling

An AJAX-driven form in a Floatbox lets you construct the form using server-side code, efficiently deliver just the form HTML to the browser, do client-side validation and pre-processing prior to submission, receive the completed form at the server using GET or POST, do server-side validation and processing (such as database updates), return a dynamic response to the client-side code, update a portion of the current page if appropriate, and gracefully terminate the form by closing the floatbox. Try it, you'll like it.

View form source
<a href="ajax_form.php" class="floatbox" data-fb-options="type:ajax">AJAX form</a>
An iframe-based form

A more traditional approach to form processing is to place the form by itself in a full HTML document and present that page in an iframe. This allows a standard form submit to the 'action' page, and the results will render inside the existing iframe rather than replacing the original base page. There's still plenty of opportunity for validation and base page updates, but you lose the ability to do partial updates of the form page itself and you don't have the fine-grained and structured control of an AJAX+JSON conversation with the back-end.

<a href="iframe_form.php" class="floatbox" data-fb-options="width:343 caption:`Demo Form` captionPos:tc showClose:false">Iframe form</a>
Test of Floatbox (and others) serialization of form data

A key component of AJAX-based form submissions is correct serialization of the form fields to send to the back-end. Here's a form I use to verify Floatbox's conformance with the W3C specification in this regard and to test the correctness of some other popular javascript libraries (jQuery, dojo, YUI, MooTools, MochiKit & Prototype).

<a href="serialize.php" class="naked floatbox" data-fb-options="width:max maxContentWidth:1200 outerClosePos:tl">Test form</a>

Images
Floatbox had its genesis in 2007 when its author needed a decent lightbox-clone image viewer for a now-defunct travelogue site, and none of the available ones were good enough. The lightbox approach to viewing image galleries is the most user-friendly way to display images on web sites and continues to be a core feature of Floatbox, which handles the task with unparalleled reliability and flexibility. Check out the Options Reference to get an idea of the broad scope of configuration and presentation possibilities.

Image Gallery (click/touch any thumbnail)
              

This gallery is defined in the HTML code with the "floatbox" class and "group" option set on a <div> element that contains 5 links to images. Each link contains a clickable thumbnail, but this is optional. The links can be empty with no clickable content displayed — the linked images will still be members of the gallery set. Each image link can have its own options set for things specific to that image, such as the caption. In this example, the floatbox captions are picked up from the title attributes.

<div class="floatbox" data-fb-options="group:demo1">Image Gallery<br/>
  <a href="phang_nga_bay.jpg" title="Phang Nga Bay" data-fb-options="caption2:`Thailand, '03`">
    <img src="phang_nga_bay_thm.jpg"/>
  </a>
  <a href="doi_inthanon.jpg" title="Queen's Chedi at Doi Inthanon"><img src="doi_inthanon_thm.jpg"/></a>
  <a href="dusk_dip.jpg" title="Dusk Dip at Ao Nang"><img src="dusk_dip_thm.jpg"/></a>
  <a href="koh_tab.jpg" title="Double Beach On Koh Tab"><img src="koh_tab_thm.jpg"/></a>
  <a href="ao_nang_beach.jpg"><img src="ao_nang_beach.jpg"/></a>
</div>
A gallery slideshow starting from a single thumbnail

Here's a gallery set that runs as an automatic slideshow due to the assignment of the doSlideshow:true option. Only the first link in this set has clickable content — the other 4 are empty links. The caption option is set to "href" causing the captions to match the image filenames.
The second slideshow link below has a lot of appearance options set on it, and the showThis:false option prevents it from becoming a unwanted 6th member of the gallery set.

The same slideshow modified with a bunch of options
<div class="floatbox" data-fb-options="doSlideshow:true group:demo2 caption:href">
  <a href="zion_valley.jpg"><img src="zion_valley_thm.jpg"/></a>
  <a href="courthouse.jpg"></a>
  <a href="angel's_landing.jpg"></a>
  <a href="landscape_arch.jpg"></a>
  <a href="utah_road.jpg"></a>
</div>
<a href="courthouse.jpg" data-fb-options="showThis:false group:demo2 doSlideshow:true colorTheme:red imageTransition:slide contentCornerRadius:10 navType:button minBoxWidth:95% minBoxHeight:95%">Slideshow modified</a>
Index Links for navigation within the open gallery

Index links are a small series of numbered links and associated popup thumbnails that are placed within the floatbox frame area. These can be used to jump around to different gallery images out of the normal previous/next sequence. We're opening the gallery set at its second image by setting the opening link's href to match the href of the second image in the grouped set. We're also using the predefined "alt" set of options (see below), the silver colorTheme, and have disabled the default image zoom effect with zoomSource:null because the thumbnail image is different than the gallery image.

<a href="doi_inthanon.jpg" class="alt floatbox"
  data-fb-options="numIndexLinks:-1 group:demo1 showThis:false colorTheme:silver zoomSource:null"
>Index Links<img src="index_links_thm.jpg"/></a>
In-frame Resizing (open, enlarge, and drag the image around)

Default behaviour for large images is to initally scale them down so that the floatbox fits inside the visible viewport. Then, clicking the image or the resizer enlarges the image to its full native size within the confines of the unchanged floatbox frame. The full size image can be dragged around by mouse or touch inside the frame. Other options applied to this example change the colorTheme away from the default black, restrict the startup size of the floatbox, move the close button to the top-right corner, set the caption to the image's file name, and pull the second caption from a hidden div on this page.

<a href="globe_east.jpg" class="floatbox" data-fb-options="colorTheme:blue maxContentHeight:640 controlsPos:tr caption:href caption2:#visibleearth caption2Pos:br">In-frame Resizing<img src="globe_east_thm.jpg"/></a>
Image maps
platonic solids wikipedia: platonic solid tetrahedron hexahedron octahedron dodecahedron icosahedron

A floatbox can start from an image map area just as easily as from a standard link and thumbnail. Assign the 'floatbox' class and 'data-fb-options' to the map's <area> elements. In this example, the class and options are inherited by each area element from the parent map, avoiding the need to repeat them for each area. Note that none of the options assigned directly and through the 'plato' class are required. They're just here to make this example fancy.

View "plato" class options
<img src="solids.jpg" usemap="#plato"/>
<map id="plato" name="plato" class="plato floatbox">
  <area shape="rect" coords="6,7,51,32" href="http://en.wikipedia.org/wiki/Platonic_solid"
    data-fb-options="group:null caption:null"
  />
  <area shape="poly" coords="60,12,103,6,89,48" href="tetrahedron.png"
    data-fb-options="info:tetrahedron.gif"
  />
  <area shape="poly" coords="124,6,148,15,153,29,139,47,112,39,114,25" href="hexahedron.png"
    data-fb-options="info:hexahedron.gif"
  />
  etc...
</map>

Enhanced Tooltips and Context Boxes
Floatbox's enhanced tooltips are similar to system tooltips in that they appear at or near the mouse or host element when that element is moused over. Context Boxes emulate system context menus and respond to right or left click events on a host element. They can also be activated by touch gestures on mouse-less devices. They are much more versatile than system tooltips and context menus since their content can be constructed with HTML and they can be configured and styled with numerous Floatbox options.

Here's a tooltip attached to a small image.
<img class="fbTooltip" data-fb-tooltip="source:#tooltip1 attachToHost:true" src="tulip.png"/>

A tooltip can move with the mouse (assuming you're using a mouse) and can be placed above, below, centered or on either side of the host element or the cursor. Take a walk along the tracks below.

train track
<img class="transparent fbTooltip" src="track.jpg"
  data-fb-tooltip="source:train.png placement:top outerBorder:0 showOuterClose:false
  afterBoxStart:`if (fb.$('train.mp3').play) fb.$('train.mp3').play();`"
/>

And, just to prove that tooltips can be attached to any element and not just to images as shown above, here's a simple tooltip attached to this paragraph. It has "autoEnd:5" and "showOnce:true" set on it, so it will disappear after 5 seconds of hovering and won't show again on mouse-over or touch during the current browser session.

Please note that both the Floatbox Instructions and the Options Reference have sections on enhanced tooltips and context boxes. Anyone considering implementing either of these widgets would do well, and save a bunch of time, by reviewing that documentation before tearing into writing the markup and code.

<p class="fbTooltip" data-fb-tooltip="source:#tooltip2 showOnce:true autoEnd:5 colorTheme:black contentBackgroundColor:black outerBorder:0">
  blah blah blah
</p>

Context Boxes
Similar to the enhanced tooltips, context boxes can be configured to open from left and/or right mouse clicks and to close on either or both of content and document clicks.

Touch or click here with either mouse button
<span class="fbContext" data-fb-context="source:#context1">Touch or click here</span>

Here's a cool little value picker built from a context box that contains three enhanced tooltips. Fire it up by clicking on the input element.

View the AJAX source page for this example
<input class="fbContext" id="chooser" type="text" size="18" value="click to pick..."
  data-fb-context="source:picker.html type:ajax instanceName:picker"
/>

Popup Thumbnails
Hidden away down here at the bottom of this section of the demo page are the popup thumbnails. Create a popup thumbnail link by assigning a class name of "fbPopup", "fbPopdown", "fbPopcenter", "fbPopleft" or "fbPopright". These will reveal a hidden thumbnail within an anchor (<a>) element when moused-over or touched, and hide it again on mouse-out or another touch. The anchors remain normal functioning links which can be given Floatbox behaviour by also assigning the "floatbox" class to them.

<a class="fbPopup floatbox" href="waterfowl_lakes.jpg">fbPopup<img src="waterfowl_lakes_thm.jpg"/></a>
Expanding effect with two thumbnails

The "fbPopcenter" class can be used to generate an expanding thumbnail effect. This is done by placing two img elements (thumbnails) inside the anchor element. The first thumbnail is the one that starts off hidden and gets shown on mouse-over. The second thumbnail is visible on the page as the normal anchor content.

<a class="floatbox fbPopcenter" href="twin_lakes.jpg">
  <img src="twin_lakes_thm.jpg" width="144" height="108"/>
  <img src="twin_lakes_thm.jpg" width="96" height="72"/>
</a>

Image and Thumbnail Cyclers
Setup up a div with a class name of "fbCycler" to cycle through a set of thumbnails or images defined within that div. Please see the instructions for specific configuration requirements and recommendations (including what's going on with those funky "data-fb-src" attributes in the markup shown below).

Image cycler

The fbCycler set below is a standard image cycler with the 'cycleEnableClick' option set to true. This setting allows it to be paused and resumed with mouse clicks or touches and by default displays the small Play/Pause button over the images. Be sure to check out the 'Cyclers' section in the Options Reference for all the options that control the appearance and operation of cycler sets.

Phi Phi Lay Island
<div class="fbCycler" data-fb-options="cycleEnableClick:true">
  <div>
    <img src="phi_phi_lay.jpg"/>
    <span>phi phi lay island</span>
  </div>
  <img src="blank.gif" data-fb-src="crescent_lake.jpg" title="crescent lake"/>
  <img src="blank.gif" data-fb-src="palawan_philippines.jpg" title="palawan, philippines"/>
  etc...
</div>
Thumbnail cycler

The cycling thumbnails to the left are also floatbox-enabled links. Clicking on a thumbnail will open the associated image in an integrated Floatbox gallery. Note the mix of options with the two 'cycle...' options for the fbCycler set and 'group' and 'caption' for the floatbox gallery.

<div class="fbCycler floatbox""
  data-fb-options="cyclePauseOnHover:true cycleFadeTime:2 group:utah caption:href"
>
  <a href="zion_valley.jpg"><img src="zion_valley_thm.jpg"/></a>
  <a href="the_courthouse.jpg"><img src="blank.gif" data-fb-src="the_courthouse_thm.jpg"/></a>
  <a href="angel's_landing.jpg"><img src="blank.gif" data-fb-src="angel's_landing_thm.jpg"/></a>
  etc...
</div>

Options
There are 169 settable options listed in the Options Reference — each of which does something useful. It is highly recommended that you look through that document before implementing Floatbox to get a good idea of what can be done and how to do it. The Instructions document contains a few sections on ways and places to set options, and the Configurator is a convenient way to set site-wide or page-wide preferences (but it does not handle item-specific settings, nor class or type options).

Class options

The ability to assign a set of option settings to a class name is a powerful and clean way to manage customizations of Floatbox appearance and behaviour. The idea is to associate a set of options with a class name in the options.js file. Then, when you assign that class to a floatbox link, those option settings will be used by that link.

There are 3 classOptions defined in the floatbox/options.js file that can be assigned to content links and, of course, can be modified or extended with other options. These are demonstrated below with images but can be applied to any content type. They might also be a good starting point for defining your own sets of class options.

class="naked floatbox"
class="alt floatbox"
class="transparent floatbox"
No border or close button
<a class="naked floatbox" href="ecomobile.jpg">naked</a>
<span class="alt floatbox" data-fb-options="group:mono">
  <a href="monotracer.jpg" data-fb-options="caption:`Peraves MonoTracer`">alt</a>
  <a href="monotracer2.jpg" data-fb-options="caption:#peraves"></a>
</span>
<a class="transparent floatbox" href="tan.png">transparent</a>
<a class="transparent floatbox" href="tan.png"
  data-fb-options="showOuterClose:false outerBorder:0 contentClickCloses:true"
>No border</a>

Here's a couple of sets of classOptions defined in an 'fbClassOptions' javascript object on this page. The first one is excessive and a bit silly, but shows some of the things that can be done. The second example is much more sensible and could be used in a real-world context such as enlarging a product photo from a catalog page.

<div class="lavish floatbox">
  <a href="orangutan1.jpg">A lavish set</a>
  <a href="orangutan2.jpg"></a>
  <a href="orangutan3.jpg"></a>
</div>
<a class="detail floatbox" href="vase.jpg">View product detail</a>
Info link, Print link, and a tooltip

This busy little link has a print button, an info link, and a tooltip assigned through its options. The value of the info option is a reference to the content to show when the "Info..." link is clicked; in this case, a hidden div with the id "silver_info". infoOptions assigns the option settings to use for the secondary info floatbox when it opens. Its value is surrounded by back-quotes so it will parse out from the other options correctly. tooltipOptions are the options to use when the assigned #tooltip3 is shown.

<a href="silver_sea.jpg" class="floatbox"
  data-fb-options="showPrint:true info:#silver_info tooltip:#tooltip3
    infoOptions:`width:400 showPrint:true printCSS:site.css classname:childBox contentBackgroundColor:#ffffe7`
    tooltipOptions:`showOnce:true autoEnd:7.5`"
>Info link, Print link, and a tooltip</a>
APOD slideshow

This link navigates to a new page that autoStarts on page load and returns back here when done by using the loadPageOnClose="back" option. There's a whole bunch of options defined on that page to give it its unique appearance and behaviour. Check out the page source to see how it's put together.

Mostly for development and support purposes, options can be sent to a page on the query-string of the URI used to get the page. Here's the same APOD slideshow with some of its appearance settings modified by a 'fbPageOptions' query-string parameter.

APOD?fbPageOptions=...
<a href="apod.html">APOD slideshow</a>
<a href="apod.html?fbPageOptions=colorTheme:silver,minBoxWidth:100%25,boxRoundCorners:top,
  contentCornerRadius:12,innerBorder:0,outerBorder:5,imageTransition:shift"
>APOD slideshow</a>

Floatbox API
The API and supporting library functions give a robust, flexible and complete set of tools for integrating Floatbox with sophisticated web sites and applications. What can't be done with standard HTML markup can almost always be done by programming with the API. The examples below demonstrate just a small fraction of the API capabilities. To get a good idea of what's available, please see the API reference.

fb.ajax() for a dynamic interactive page
 

The little button to the left will swap in and out 3 small image galleries using the fb.ajax function. It's a good example of how AJAX can be used to organize and display large amounts of complex content and give control of the interaction to the user instead of the page designer. (Take a look at the AJAX form over on the 'Forms' tab for another example of effective fb.ajax usage.)

Dyno-Gallery!
<button type="button" onclick="fb.ajax({ source:'dyno_gallery.php', updateNode:'dynoDiv' });">Bring it on!</button>
<div id="dynoDiv"></div>
fb.reload() running a server-side image rotater

The fb.reload() API function can reload the current content in a floatbox (bypassing the browser cache) or replace the content with something else. In the case of this example, it's replacing the content with a rotated copy of the image.

<a class="floatbox" href="philippe_ramette.jpg" data-fb-options="header:#rotate_head caption:#ramette">
  <img src="philippe_ramette_thm.jpg"/>
</a>
<div id="rotate_head" onclick="fb.rotate('philippe_ramette.jpg')" style="display:none; text-align:center;">
  <img src="rotate_icon.png"/>
  <span style="display:inline-block; cursor:default; color:yellow;">
    &nbsp;<br/>click to rotate image<br/>&nbsp;
  </span>
</div>
<script>
  fb.rotate = function ( imgPath ) {
    fb.rotate[imgPath] = ( fb.rotate[imgPath] || 0 ) + 1;
    if ( fb.rotate[imgPath] > 3 ) fb.rotate[imgPath] = 0;
    fb.reload( 'rotate.php?img=' + imgPath + '&quadrant=' + fb.rotate[imgPath] );
  };
</script>
view rotate.php source file
Google maps and Floatbox

To show a Google Map in Floatbox, create a standalone map on a small self-contained page and load that page as an iframe into floatbox. You can put a marker on that map that can open its referenced content in yet another secondary floatbox. Details on building maps can be found in the Google Maps V3 tutorial.

view google_map.html source file
<a href="google_map.html" class="alt floatbox"
  data-fb-options="width:500 height:500 contentScroll:false showPrint:true"
>Google map</a>

fb.start() API function with direct HTML
Here's the old IE 6 end-of-life notice from Floatbox version 5. It's a good example of providing a direct HTML string to the fb.start function and using a javascript object for the options in the second parameter. Also note the use of fb.executeJS( ) for firing up an external javascript file in the current page context. There's a short comment at the bottom of the source file that can help you send this notice to IE 6 users who visit your site, if you want to.

Direct HTML: IE 6 end-of-life notice
(View ie6eol.js source)
<a href="ie6eol.js" onclick="fb.executeJS( this.href ); return false;">Direct HTML</a>
fb.flashObject() and ActionScript integration
getURL.png

navigateToURL.png

If you're using a browser that supports Flash content, fb.flashObject will have instatiated two small blue flash objects here. These flash objects have behaviors defined in ActionScript that open a floatbox by calling fb.start when clicked. Go ahead and click them to see the details.

Editorial: In my opinion Flash is, or should be, dead. It's not suitable technology for modern web-pages in an increasingly mobile world. However, if you want or have to use Flash on your pages, Floatbox can help.

The flashObject call...
<span id="getURL"> <!-- starts with alternate content for flash-less agents -->
  <a class="floatbox" href="/path/getURL.png">getURL.png</a>
</span>
<script>
fb.flashObject({
  source: '/path/getURL.swf',
  width: 80,
  height: 30,
  node: 'getURL'
});
</script>
The getURL ActionScript 2 code...
btn.onRelease = function() {
  getURL( "javascript:fb.start( '/path/getURL.png' )" );
};
The navigateToURL ActionScript 3 code...
btn.addEventListener( MouseEvent.CLICK, myFunc );
function myFunc( event:MouseEvent ):void {
  var url:String = "javascript:fb.start( '/path/navigateToURL.png' )";
  var request:URLRequest = new URLRequest( url );
  navigateToURL( request, "_self" );
}

This is the Queen's Chedi near the summit of Doi Inthanon in Chiang Mai province, Thailand. The King's Chedi is just across from it. The grounds here are beautiful and well kept and the views are spectacular.

Doi Inthanon is the highest peak in Thailand at 2,565 metres (8,415 feet). It is always cool up there with average daily highs around 23C. January temperatures can be much lower than that. It's a great place to escape the valley heat and a recommended visit for anyone in the Chiang Mai area.

Powered by
Floatbox
 

This content is loaded from a hidden DIV on the host page. The box is configured with the attributes class="alt floatbox" and data-fb-options="contentBackgroundColor: #034c41; boxColor: #083731; innerBorderColor: #3e0e02; overlayColor: grey; colorTheme: red; innerBorder: 2px; outerBorder: 0px; captionPos: tc;".

Here's a little bit of AJAX content showing the behaviour of multiple open floatboxes and a variety of appearance options.

tangled fractal

Use the "info" option to present information about the underlying floatbox content.

In this example, the info box is loading content from a hidden div, but you can load anything floatboxable here: an iframed web page, an ajax fetch, or whatever.

This is a stationary tooltip fed from a hidden div. It uses "attachToHost:true" so that we can get to and click the small flower image, which is a clickable link.
Don't forget...
The documentation is your friend.

Be sure to open the other two non-modal boxes to get a good idea of how they interact.

These boxes have a set width, but are using Floatbox's ability to measure content and auto-size the height appropriately. They also have "boxScroll:false" set so that you can scroll the underlying page without having the floatboxes move off screen.

Go ahead and drag these boxes around by their frames, resize them, move different ones to the front and close them in any order. You can open other stuff from the underlying page as well.

 
click to rotate image
 
wherethehellismatt.com    ckeditor.com krpano.com visibleearth.nasa.gov peraves.wordpress.com Philippe Ramette: artist info