Video+ HTML Forms Images Tooltips+ Cyclers Options Hi-Tech

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 provides easy deployment and intuitive presentation of video content - whether from locally served files, YouTube, Vimeo, or other online sources - to a wide spectrum of desktop and mobile browsers.

Information to help get started can be found in the 'Video' section of the Floatbox Intructions document, the examples shown below, and the notes beside those examples.

Floatbox Player for HTML5 and Flash video

Floatbox's integrated HTML5 video player will play MP4 videos using a browser's native video capabilities and will automatically fallback to Flash (using Flowplayer) for old browsers that can't handle HTML5. A simple link with an .mp4 file path in the href is all that's needed to get it going. A .jpg image file with the same name in the same folder will be automatically used as the video player's start-up poster on mobile devices (which don't allow auto-playing of videos) and as the link's thumbnail if the 'addVideoThumb' option is enabled.

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

Invoke the YouTube video embed player with a link's href path similar to https://www.youtube.com/watch?v=KaOC9danxNo or the shorter https://youtu.be/KaOC9danxNo. Optionally add "width" and "height" options appropriate to the video being shown (will default to the lesser of 980px and 87% of screen width, and a 16:9 aspect ratio). The "addVideoThumb" option will fetch a thumbnail from the YouTube service (and hide its ugly horizontal black bars).

<a href="https://youtu.be/KaOC9danxNo" data-fb-options="addVideoThumb:192 width:853" > YouTube ... player </a>
Vimeo iframe embedded player

Link to a Vimeo video by using the video's id in a simple href path like https://vimeo.com/15795860. Floatbox will automatically fetch caption, width, height and thumbnail information for public videos using Vimeo's API interface. If showing private videos, the API cannot be used and so 'addVideoThumb' cannot do its job and the other details will need to be provided manually.

<a href="https://vimeo.com/29017795">Vimeo Player</a>
Video from other online services

Floatbox can show iframe video embeds from any online service that provides them, not just YouTube and Vimeo. Add "type:video" to the options to let Floatbox know that the remote page is a video and not iframe HTML content. Notice that because the href path is not an apparent video link, 'activateMedia' will not light up this link. The 'floatbox' class needs to be explicitly added in order to activate the link as floatbox content.

<a href="https://embed.ted.com/talks/thomas_peschak_dive_into_an_ocean_photographer_s_world.html" class="naked floatbox" data-fb-options="type:video addPlayButton:small" > Other video </a> (or use the short-code href="https://embed.ted.com/talks/2434.html")
Flash content (.SWF files)

Floatbox can be used for reliable presentation of Adobe Flash content from .swf files (on browsers that support Flash, which fewer are doing as time goes on). 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" 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 script or security configuration of that page, it can be presented in a floatbox.

Floatbox Options Reference presented as scrollable iframe content
A public Google calendar from a foreign domain.
      (Get the embed path from a calendar's settings.)
CKEditor: a fine little open source HTML editor
An interactive RSS newsfeed page running in an iframe
<a href="/floatbox/options.html" class="floatbox" data-fb-options="width:650 boxScroll:false showNewWindow:true showPrint:true enableDragResize:true" > Floatbox Options Reference... </a>
<a href="https://www.google.com/calendar/embed?src=en.th%23holiday%40group.v.calendar.google.com&amp;ctz=Asia/Bangkok&amp;hl=en" class="floatbox" data-fb-options="width:620 height:380 className:alt padding:14 innerBorder:0 boxCornerRadius:0 boxColor:#e3e9ff" > ...Google calendar... </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="modern floatbox" data-fb-options="width:420 height:200" > ...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="colorTheme:red contentBackgroundColor:#034c41 boxColor:#083731 innerBorderColor:#3e0e02 overlayColor:grey 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="https://krpano.com/tours/corfu/" class="floatbox" data-fb-options="width:100% caption:#krpano" > Corfu Panorama! <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" data-fb-options="caption:href" > PDF documents </a>
Scribd hosted document service

The scribd.com online document publishing and sharing service 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. Get the iframe embed path from scribd (the format is shown below) and use this as the href value of a floatbox link.

<a href="https://www.scribd.com/embeds/100538359/content?show_recommendations=false" 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>
A form in an iframe

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:377 contentScroll:false autoFit:false showClose:false captionPos:tc caption:`Demo Form` afterBoxStart:`fb.$( 'subject' ).focus()`" > 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:100% maxWidth: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 <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_thm.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"> gallery slideshow... <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" class="floatbox" 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. See 'numIndexLinks' and related options in the Options Reference for usage details. Note that the 'mobile' section in fbOptions.js prevents the display of index links on small screen devices (< 8") because they're just too fiddly there. 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. The default image zoom effect is disabled with zoomSource:null because in this example the starting thumbnail image is likely off-screen.

<a href="doi_inthanon.jpg" class="modern" data-fb-options="numIndexLinks:-1 group:demo1 showThis:false 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. The 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" data-fb-options="colorTheme:blue maxHeight: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" data-fb-options="group:null caption:null" href="https://en.wikipedia.org/wiki/Platonic_solid" /> <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 host element when that element is moused over, or touched on a mouseless system. Context Boxes emulate system context menus and respond to touch and right or left click events on a host element.

Enhanced tooltips and context boxes are more versatile than system tooltips and context menus: their content can be constructed with HTML, they integrate better with touch devices, and they can be configured and styled with numerous Floatbox options.
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 perhaps save a bunch of time, by reviewing that documentation before tearing into writing the markup and code.

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

Tooltips - being basically modified floatboxes - can display any content type, respond to 'className' options based on the class attribute of the host element, and can be configured with almost any floatbox option, including callbacks and position adjustments as shown here.

train track
<img class="transparent fbTooltip" src="track.jpg" data-fb-tooltip="source:train.png placement:center boxTopAdjust:-31 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.

<p class="fbTooltip" data-fb-tooltip="source:#tooltip2 placement:top showOnce:true autoEnd:5 colorTheme:black contentBackgroundColor:black outerBorderColor:black" > 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 (please, if you want to...)
<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> <a class="fbPopdown floatbox" href="lake_josephine.jpg"> fbPopdown <img src="lake_josephine_thm.jpg"/> </a> etc...
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).

A Floatbox cycler banner

If you got to this section by tapping the "Cyclers" tab up there↑, then you probably noticed the banner image making an appearance at the top of this page. (If you scrolled in, click the boy to start the banner, and perhaps scroll to the top of the page to have the banner's placement make sense.)

Here's the source for banner.js that built that cycling header.
It's good for seeing how the Floatbox API can be used to do real work, and to show what's necessary for getting a cycler set up. But please don't cut and paste it into your own pages and then contact Floatbox support if it doesn't work in that context.

Image cycler

The fbCycler set below is a standard image cycler with the 'cyclePauseOnClick' 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.

Your own look and feel can be applied to a cycler set with standard css styles applied to img and span elements within the fbCycler div, and overlayed content can be assigned by adding a <p> element at the bottom of the fbCycler div.
apply custom styles and text

Phi Phi Lay Island

Uses <canvas> for sub-pixel smoooothyness

<div class="fbCycler" data-fb-options="cyclePauseOnClick: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"/> etc... <p><img src="u.png"/>ses &lt;canvas&gt; for sub-pixel smoooothyness</p> </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 166 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.

<span class="modern 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> <a href="//youtu.be/XcBQqo9FrNE" data-fb-options="width:640 height:75%w"></a> </span>
<a class="alt" href="chairs.jpg">alt</a>
<a class="naked" href="ecomobile.jpg">naked</a>
<a class="transparent" href="tan.png">transparent</a>
<a class="transparent_child" href="tan.png">Even more...</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" href="vase.jpg">View product detail</a>
Info and Print links

Here's a print button and info link assigned through 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.

<a href="silver_sea.jpg" data-fb-options="showPrint:true info:#silver_info infoOptions:`width:400 showPrint:true printCSS:site.css contentBackgroundColor:#ffffe7`" > Info and Print links </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 'fbOptions' query-string parameter.

APOD?fbOptions=...
<a href="apod.html">APOD slideshow</a>
<a href="apod.html?fbOptions=colorTheme:silver,minBoxWidth:100%25, contentCornerRadius:12,innerBorderColor:white,outerBorder:5,imageTransition:slide" > 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 only a portion of the API capabilities. To get a good idea of what else is available, please see the API reference.

A Floatbox slider panel

If you got to this section by tapping the "Hi-Tech" tab up there↑, then you probably noticed the slider panel making an animated entrance. (If you scrolled in, click the girl to start the slider.)
It's actually fairly simple to implement and is a great example of using a variety of Floatbox API pieces to add some intelligence and variety to a standard floatbox. Slide the panel open to view the javascript source that built it.

The slider.js file is invoked by a simple call of the fb.require API function.
fb.require is an effective javascript loader that handles all of Floatbox's dynamic fetches and can be used as a powerful lazy-load mechanism for performant sites.

<a href="slider.js" onclick="fb.require( this.href ); return false;" > ...slider panel </a>
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', $:'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 href="philippe_ramette.jpg" data-fb-options="header:#rotate_head caption:#ramette" > <img src="philippe_ramette_thm.jpg"/> </a>
<div id="rotate_head" onclick="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> function rotate ( imgPath ) { rotate[imgPath] = ( rotate[imgPath] || 0 ) + 1; if ( rotate[imgPath] > 3 ) rotate[imgPath] = 0; fb.getInstance( 'philippe_ramette' ).reload( 'rotate.php?img=' + imgPath + '&quadrant=' + 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 of using the maps API can be found in the Google Maps documentation.

view google_map.html source file
<a href="google_map.html" class="modern floatbox" data-fb-options="width:500 contentScroll:false showPrint:true" > Google maps... </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.require( ) 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 users of old IE versions who visit your site, if you want to.

Direct HTML: old IE end-of-life notice
(View ie-eol.js source)
<a href="ie-eol.js" onclick="fb.require( this.href, null, true ); 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 need to use Flash on your pages, Floatbox can help.

The flashObject call...
<span id="getURL"> <!-- starts with alternate content for flash-less agents --> <a href="/path/getURL.png">getURL.png</a> </span> <script> fb.flashObject({ source: '/path/getURL.swf', width: 80, height: 30, $: '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="modern 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.

The content for this tooltip comes from a hidden div. The 'click here' image is a link that opens a new floatbox.
Don't forget...
The documentation is your friend.

Be sure to open the other two non-modal boxes to get an idea of how they happily co-exist and operate independently.

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: more images