Samples of things you can do with Floatbox. Below each sample is the html code used to generate it.
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 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 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
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).
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 in order to activate the link as floatbox 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.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
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.
Floatbox is a great way to present panoramas and virtual tours. This one is content from an external domain running as a Floatbox iframe. (It may take a few seconds to load.)
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.
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.
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 source
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.
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.
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
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 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 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
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.
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.
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 enhanced tooltips. Fire it up by clicking on the input element.
View the AJAX source page for this example
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 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.
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
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 two 'cycle...' options for the fbCycler set and 'group' and 'caption' for the gallery set items.
There are 135 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 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.
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=...
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.)
The slider.js file is invoked by a simple call of the fb.require API function.
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.)
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