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 videoFloatbox'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-HDInvoke 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.
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.
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.
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.
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 editorIn 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 prettyMost, 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 ViewerHere'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.
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.
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.
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 sourceA 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 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).
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.
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.
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.
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.
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 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 optionsEnhanced 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.
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.
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.
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.
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
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.
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.
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).
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 cyclerThe 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
ses <canvas> for sub-pixel smoooothyness
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.
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).
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.
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.
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.
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.
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.
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.
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 pageThe 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.)
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.
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