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
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 Instructions document, the examples shown below, and the notes beside those examples.

Floatbox Player for HTML5 video

Floatbox's integrated HTML5 video player will play MP4 (and WEBM) videos using a browser's native video capabilities. 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 used as the 'zoomSource' and 'addVideoThumb' source (unless those options are disabled) and as the video player's start-up poster for videos that don't start playing automatically.

Got bandwidth? Try it in semi-HD
<a href="matt_360.mp4" data-fb-options="width:640 height:360"> Floatbox Player... </a>
<a href="matt_720.mp4" data-fb-options="addVideoThumb:false"> ...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 or the even shorter //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). Unless the "addVideoThumb" option is set to false, a thumbnail image will be fetched from the YouTube service and added to the link.

<a href="//youtu.be/KaOC9danxNo" data-fb-options="addVideoThumb:192 width:800 height:450" > 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.

<a href="https://embed.ted.com/talks/thomas_peschak_dive_into_an_ocean_photographer_s_world" 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")

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.

Same-domain iframes...
Floatbox Options Reference presented as scrollable iframe content
CKEditor: a fine little open source HTML editor
<a href="/floatbox/options.html" class="floatbox" data-fb-options="width:650 showNewWindow:true showPrint:true enableDragResize:true" > Floatbox Options Reference... </a>
<a href="/content/ckeditor" class="floatbox" data-fb-options="width:802 height:602 autoFit:false caption2:#ckeditor controlsPos:tr" > CKEditor... </a>
Cross-domain iframes...
A document from the DocumentCloud
A public Google calendar (Get the embed path from a calendar's settings.)
<a href="https://www.documentcloud.org/documents/612500-la-2013.html" class="floatbox" data-fb-options="caption2:#documentcloud controlsPos:tr" > A document... </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>
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: IP geolocation data
Hidden div: Content already residing on this page, with lots of options to make it pretty
<a href="ipgeo.php" class="floatbox" data-fb-options="type:ajax enableDragResize:true contentScroll:false afterItemStart:fb.resize()" > 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>
PDF documents

Most, if not all, modern browsers are capable of displaying PDF documents using their own rendering component. You can link directly to a .pdf file and Floatbox will put it up inside an iframe element with generally satisfactory results. However, some browsers make questionable choices around the document layout and controls.

Consistent presentation can be achieved by using a cloud-based file service's document viewer to display the PDF document. Host the document on your favourite online file-share (DropBox, Google Drive, OneDrive, etc.), look through the host's interface to get the 'embed' link to the doc, and use that embed path as the href on a floatbox link.

Or, to make things simpler and more flexible, the Google Docs viewer can be used from anywhere to view a document hosted anywhere: it's not restricted to files hosted on Google. However, Floatbox Support is not in a position to guarantee that Google won't pull the rug out from under this functionality if and when it suits them to do so.

Google Docs Viewer
<div class="modern floatobx"> <a href="/content/parameters.pdf#page=5&navpanes=0">PDF documents</a> <a href="https://docs.google.com/gview?embedded=true&url=https://floatboxjs.com/content/sun_salutation.pdf">Google Viewer</a> </div>

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 cornerRadius:4 padding:12 colorTheme:yellow contentBackgroundColor:#ffffe7" > <a href="#nonmodal1" data-fb-options="boxTop:200 boxLeftAdjust:150">...sample #1</a> <a href="#nonmodal2" data-fb-options="boxTop:250 boxLeftAdjust:75">...sample #2</a> <a href="#nonmodal3" data-fb-options="boxTop:300">...sample #3</a> </div>
Alma Observatory (Chile)

Floatbox is a great way to present panoramas and virtual tours. This one is content from an external domain running as a Floatbox iframe. The caption is a link to the panaroma's provider.

<a href="https://cdn.pannellum.org/2.4/pannellum.htm?panorama=https://pannellum.org/images/alma.jpg&amp;autoLoad=true" class="floatbox" data-fb-options="width:800 aspect:1.778 maxBoxWidth:90% caption:#pannellum" > Alma Observatory <img src="alma_pano_thm.jpg" /> </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 as 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="autoFit:false showClose:false captionPos:tc caption:`Demo Form`" > 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="contentScroll:false noFocus:true maxWidth:1000 detachOuterClose:true" > 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. More than a decade later, the lightbox approach to viewing image galleries remains intuitive and effective, and continues to be a core feature of Floatbox. 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"> <img src="dusk_dip_thm.jpg"/> </a> <a href="koh_tab.jpg" title="Koh Poda Nok from Talay Wak"> <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="zion-valley.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, embiggen, 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 moved around inside the frame with mouse hover moves and/or touch or mouse dragging. 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 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 for an ugly context-box
<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 fbTooltips. 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 over there ← to start the banner, and perhaps scroll to the top of the page to have the banner's placement make sense.)

The cycler that appears is a simple and fairly standard fbCycler setup that's added to the page using the API function 'fb.ajax'. View the source of this page and look for the 'loadBanner' function if you're curious about the details. The cycler HTML brought in by that fb.ajax call can be viewed here.

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>Uses &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 a Floatbox gallery. Note the mix of options with the three 'cycle...' options for the fbCycler set and 'group' and 'caption' for the floatbox gallery set items.

<div class="fbCycler floatbox" data-fb-options="cyclePauseOnHover:true cycleZoom:0 cycleFadeTime:3 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 well over a hundred 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="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 the 'className' section of an 'fbOptions' javascript object. 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.

<a href="apod.html">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.icons: Floatbox's SVG icon images

Floatbox now uses small SVG images as its icons for various controls. This is the final evolution of icons that started as background .gif images, then graduated to icon font sets, and finally now SVG which is very efficient, renders more crisply than font characters, and is easier and more reliable to deliver over the network. A move towards the future which was made possible by finally ditching support for old Internet Explorer - which will not be missed.

You can easily use the Floatbox icon set in your own projects simply by referring to them as fb.icons.<name>. You can also use these same references to insert your own custom control icons into your instance of Floatbox.

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( '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 afterItemStart:setupRotate afterBoxEnd:`rotate['media/philippe_ramette.jpg'] = 0;` startAt:start endAt:start enableImageResize:false " ><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 setupRotate( instance ) { fb.addEvent( instance.fbContent, 'click', fb.$( 'rotate_head' ).onclick ); rotateInstance = instance; } function rotate ( imgPath ) { rotate[imgPath] = ( rotate[imgPath] || 0 ) + 1; if ( rotate[imgPath] > 3 ) rotate[imgPath] = 0; rotateInstance.reload( '/content/rotate?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>

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. The default settings for boxScroll and pageScroll set fixed-positioning on the 3 non-modal boxes but allow the underlying page to scroll beneath them.

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
wheretheheckismatt.com ckeditor.com documentcloud.org visibleearth.nasa.gov pannellum.org yogaartandscience.com peraves.wordpress.com Philippe Ramette: more images