Floatbox: The premier javascript effects library
and world's best lightbox clone

What is Floatbox?

Floatbox is a javascript library for displaying windowed content over top of web pages. In addition to excellent 'lightbox clone' capabilities, Floatbox includes the ability to easily show video content, cycling image sets, enhanced tooltips, context menus and popup thumbnails. All content types are supported and there is an extensive and reliable API and suite of library functions included which make Floatbox the tool of choice for building smart interactive content. Floatbox is highly customizable, easy to deploy, and very robust and reliable across all modern browsers. Excellent support is always available if needed, and the software is continuously maintained and updated to keep pace with evolving web standards and new browser platforms. Floatbox strives to be the best-of-breed in all respects with features and capabilities web-site designers need to build quality 3-dimensional sites and services.

Where can I get it?

The latest version is always available from the download page.

Is support available?

Your first stop for support info should be the Instructions, Options Reference, and API Reference. If the answers you need aren't there, head over to the forum and search for solutions or post your requests. You can also use the contact form to email the Floatbox developer directly if you like.

Got any examples?

You bet. There's lots of examples, together with the associated markup, over on the demo page.

Supported Browsers:

  • IE 6.0+
  • Firefox 3.0+
  • Chrome 0.2+
  • Safari 4.0+
  • Mobile Safari (iPhone etc.) iOS 4+
  • Opera 9.5+
  • Opera Mobile 10.0+
  • Dolphin HD 7.2+
  • Android Browser 3.0+
  • Atomic Lite 5.0+
  • SeaMonkey 1.1+
  • Flock 2.0+
  • Camino 1.5+
  • Maxthon 1.6+
  • Sleipnir 2.0+
  • Rekonq 0.1+
  • Netscape 7.2+

Nice Things People Say:

  • I tried a lot of products and this one was fantastically easy to install and simply worked straight away on this fairly complicated web site and all the configuration options needed were there. Excellent work!
  • Absolutely perfect for presenting content in a professional way and leaving a true quality impression.
  • I'm still amazed by the amount of personal attention you give to this project. I wish everyone was as dedicated to their products and quick to follow up as you are.
  • The more I use it, the more impressed I become. You have obviously taken a lot of care so that Floatbox integrates smoothly.
  • Simple, beautiful, elegant and a tremendous time-saver.
  • The ease of its usage, along with WHAT it can be used for, is amazing!
  • There is no website or support forum I surf that gives such concise, lucid, and thorough support, along with real-world solutions to tackle and solve webmaster issues.
  • Of all the many _boxes out there yours is the finest of all and best supported.
  • It is the perfect mix of simplicity and intelligent design and it has the easiest set-up.
  • powerful, elegant, intuitive
  • Not only is Floatbox the king of lightbox clones but the documentation is superb.
  • A beautifully designed and documented library.
  • An amazing product. It does things that many of the other lightbox solutions don't and is very easy to configure and use.
  • The documentation is extremely comprehensive and quite easy to follow.
  • Great customer service!
  • We are very pleased with the ease of use, full functionality and even the price of this software.
  • After trying many lightboxes I am impressed with Floatbox. It does far more than I would ever ask of it (and does it with style) and I can use it in my pages with ease.
  • I really like your component - it's awesome and definitely the best of its type I have seen to date.
  • I tried many different programs but yours was the most comprehensive and visually appealing.
  • I am amazed at how much more Floatbox can do than all the other ones I tested.
  • This software is "Outstanding" and deserves a higher purchase price!
  • Your script really helps my photos look so much better. A perfect script, all I could ask for. Thanks!
  • Support is utterly fantastic and the product adds both elegance and quality to the sites using it.

Features

  • Native handling and display of the following content types:
    • Standalone images
    • Image galleries
    • Slideshows
    • AJAX html content
    • Iframed html content
    • Inline hidden divs
    • Direct html text
    • Flash
    • Silverlight
    • Quicktime
    • Windows Media
    • Online multi-media services (YouTube, Vimeo, DailyMotion)
    • New online multi-media iframe-based embeds.
    • PDF documents
    • Mixed content-type gallery sets
  • Easy to setup and use
  • Extensive and flexible control over Floatbox's behaviour and appearance through numerous configuration options
  • Best-of-class support for mobile and touch browsers
  • Can place a set of cycling images or thumbnails that fade through the set on your main page
  • Enhanced tooltips that can be assigned to any element and respond to mouse-over events
  • Context boxes that can be assigned to any element and respond to left and/or right mouse clicks
  • Popup thumbnails that appear when the mouse is over an anchor
  • Excellent form handling through integration with the API
  • Will auto-fetch thumbnail, title and sizing information for YouTube, Vimeo and DailyMotion videos
  • Can display iframe embed format for videos from online services to better support non-Flash devices such as iPads
  • Ability to set options globally, page-specific, per content type, per class name, and item specific
  • Early code loading: Floatbox is initialized and ready prior to all the images on the page being loaded
  • Modular: dynamically loads code as required to optimize initial load time
  • Quick image loads due to aggressive preloading (which can optionally be turned off)
  • Requires minimal page markup - two or three entries on a page are enough to light up an entire page of links
  • Auto-detection of html content size
  • Live zooming of images from the thumbnail to the floatbox display on start and end
  • Cross-fading of images when transitioning between gallery set members
  • Can assign a 'zoom' effect to any content, including area maps and the various types of html
  • Round corners with selectable radius, or classic square corners
  • Shadow effect, configurable for drop shadow (2-sided) or halo effect (4-sided) and shadow width
  • Modal and non-modal floatbox windows which allow a multi-windowed environment to be setup on a web page
  • Includes a "configurator" tool which allows you to set your option preferences by selecting values from a form
  • Properly implements 'tab' keyboard browsing and other keyboard shortcuts for individuals that cannot use a mouse
  • Can be integrated with Section 508 compliant web pages without violating accessibility standards
  • Language localization of tooltips and other text with automatic support for 35 languages
  • Control gadgets automatically display without text for non-English browsers
  • Vertical and horizontal centering of images under all circumstances for all browsers
  • Gallery wrapping (navigation can go back around to the first image rather than stopping on the last)
  • Auto-sizing of content to fit the current browser screen dimensions
  • The display box can be moved and resized with mouse drags
  • Click on an image with a magnifying glass cursor to resize it
  • Programmability: you can load a floatbox from script, control it from code within its content, start from flash, etc.
  • Extensive and useful API and library functions
  • Built-in flexible and reliable AJAX utility that you can use in your own pages
  • Language translation of page content by interfacing to the Google AJAX Language API
  • Event assignment functions that gives standards-based behaviour to IE events, including proper setting of the 'this' keyword and support for document.DOMContentLoaded
  • Simple one line function to place flash objects on a page (full-featured replacement for SWFObject)
  • User-defined callback functions allows for smart integration of your code with Floatbox events
  • Can assign and display two captions for an item
  • Optional "Info" link in the floatbox which opens a secondary floatbox that can display narrative about the underlying content, EXIF information, help info for forms, or any other content you might want to display
  • Optional "Print" link and function to print just the floatbox contents
  • Optional "Open in new window" link so that users can break out of the floatbox if they wish
  • Can include a series numbered index links with popup thumbnails/previews to gallery images for non-linear gallery navigation
  • Can show transparent background content immediately above and below the floatbox
  • Supports fullscreen flash video
  • XHTML friendly. Floatbox works fine on XHTML 1.1 application/xml documents.
  • Auto-detects install and resource path locations for configuration-free operation
  • Uses only valid HTML markup on a page and does not interfere with validation tests of pages
  • Can use either the class or rel attributes for anchor configuration
  • Can use the HTML4 'rev' attribute or HTML5-compliant 'data-fb-options' attribute to assign anchor configuration settings
  • Includes 5 different color schemes for flexible integration with different sites and content
  • Custom color schemes can be assigned directly by setting options, and custom controls can be added by css modifications
  • Gradient background colors can be used for the floatbox frame area background
  • Configurable placement of captions and controls
  • Can configure alternate content for browsers with javascript disabled
  • Background overlay always completely fills the screen under IE6 and all other browsers, even when scrolling and resizing the window
  • Smooth resizing animation with simultaneous completion of 4 dimensions (width, height, horizontal and vertical centering)
  • Optional split resizing that does width and height separately and sequentially
  • "Live" image resizing
  • Optional animated fade-in of images and background overlay
  • Resizing and opacity animations self-correct their speed based on the processing capability of the browser
  • Tool-tips and upper navigation graphics can be configured to display only once
  • Captions can be defined independently of title attributes
  • Keyboard navigation (lt.arrow/rt.arrow: prev/next, space: pause/play, esc: exit, tab: resize)
  • Supports and integrates with RTL (right to left) page layouts
  • Self-contained code with no dependency on external libraries like prototype or mootools
  • Supports linking from image map areas
  • Works from within iframed documents nested arbitrarily deep, and also from frameset child documents
  • Can be constrained to display only within an iframe window, rather than the whole screen
  • Can autostart a floatbox on page load
  • Can launch a slideshow of gallery images by way of a custom link that need not be included in the gallery group
  • Can refresh parent page, navigate back one page or load a specific url on exit
  • 404 handler for bad image hrefs
  • Plays nice with other javascript (is single-object namespaced and does not extend document or javascript objects)
  • There's more. Please read the docs to get an idea of everything that's in the package.

Tested on:

Windows (XP SP2 & SP3, Vista, 7)
  • Firefox 3.0.0 - 17.0
  • Firefox 1.5.0.12 - 2.0.0.16 (problems showing flash flv players)
  • Chrome 0.2 - 23.0
  • IE 7.0 - 9.0
  • IE 6.0 (no drop shadows)
  • Safari 3.0.3 - 5.1.7
  • Opera 9.25 - 12.1 (no custom resize cursors)
  • SeaMonkey 1.1.15 - 2.0.2
  • Flock 2.5
  • Maxthon 2.5.11 - 16
  • Maxthon 1.6.5.18 - 2.5.16
  • Sleipnir 2.9.2 - 4
  • Netscape 9.0.0.6
iOS (3.x, 4.x, 5.x)
  • Mobile Safari (iPhone 3GS & 4, iPod Touch 4G, iPad 1 & 2)
  • Dolphin HD
  • Atomic Lite 5.6
  • Opera Mini (doesn't work, not supported)
Android 4.0.3
  • Android Browser 4
  • Chrome 18.0
  • Opera Mobile 12.0 (won't obey the open-in-new-window widget)
  • Dolphin HD 7.6 - 8.7
  • Skyfire 4.1
  • Firefox 10.0 (problematic on zoomed screens and inside iframes)
  • Opera Mini 7.0 (doesn't work, not supported)
Mac OS X (10.3, 10.4, 10.5 & 10.6)
  • Firefox 2.0.0.12 - 3.0.3
  • Firefox 1.5.0.12 (no custom resize cursors in any Firefox version on Mac)
  • Safari 3.0.4 - 5.0
  • Safari 2.0.4 (transparent nav overlay doesn't work, info, caption and print links are broken, no custom resize cursors. Not supported)
  • Safari 1.3.2 (does not load. Not supported)
  • Opera 9.51 (no custom resize cursors)
  • Netscape 7.2 - 9.0.0.4
  • Netscape 7.0.2 (opacity not supported, flash doesn't work)
  • Mozilla 1.7.13
  • Camino 1.5.4 (no custom resize cursors)
  • IE 5.2.3 (does not load, not supported)
Linux (Kubuntu 10.10, Ubuntu 10.04)
  • Rekonq 0.6.1
  • Chrome 9.0
  • Firefox 3.6