Floatbox: The premier javascript effects library

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 show cycling image sets, enhanced tooltips 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. There are lots of other lightbox clones out there, some of which are pretty good, others not so much. Floatbox strives to be the best-of-breed 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 1.5+
  • Chrome 0.2+
  • Safari 3.0+
  • Opera 9.1+
  • SeaMonkey 1.1+
  • Flock 2.0+
  • Camino 1.5+
  • Maxthon 1.6+
  • Sleipnir 2.0+
  • 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!
  • I am simply charmed with your software.
  • 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.
  • 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.
  • 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.
  • Man, I really love Floatbox!
  • 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.
  • Floatbox makes our galleries so much nicer and easier to work with.
  • I can't express how satisfied I am with your windowing system.
  • 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!
  • Impeccable support.
  • This is by FAR the best program I've seen!

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, Yahoo Video, etc., etc.)
    • 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
  • 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
  • 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
  • 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
  • Popup thumbnails that appear when the mouse is over an anchor
  • 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
  • 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
  • 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
  • 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
  • Can use either the class or rel attributes for anchor configuration
  • Can use the HTML4 rev attribute or the HTML5's data-fb-options attribute to assign anchor configuration settings
  • Includes 5 different color schemes for flexible integration with different sites and content
  • Ability to define your own custom color scheme in the css and background images
  • 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
  • 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)
  • Does not block ctrl and shift-clicks for opening links in new tabs or windows
  • 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 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
  • Right clicking for saving images works
  • 404 handler for bad image hrefs
  • Plays nice with other javascript
  • There's more. Please read the docs and the options reference.

Tested on:

Windows (XP SP2 & SP3, Vista, 7)
  • Firefox 3.0.0-3.6.8
  • Firefox 2.0.0.11-16
  • Chrome 5.0+
  • Chrome 4.0+
  • Chrome 3.0+
  • Chrome 2.0+
  • Chrome 1.0+
  • Chrome 0.2-0.3
  • IE 8.0
  • IE 7.0
  • IE 6.0 (no round corners or drop shadows)
  • Safari 5.0
  • Safari 4.0.0-4.0.5
  • Safari 3.0.3-4, 3.1.0-2
  • Opera 10.00-60 (still no custom resize cursors)
  • Opera 9.50-64 (no custom resize cursors)
  • Opera 9.25-27 (no custom resize cursors)
  • SeaMonkey 2.0.2
  • SeaMonkey 1.1.15
  • Flock 2.5
  • Maxthon 2.5.11.3390
  • Maxthon 1.6.5.18
  • Sleipnir 2.9.2
  • Netscape 9.0.0.6
Mac OS X (10.3 & 10.5)
  • Firefox 3.0.1-3
  • Firefox 2.0.0.12-16
  • Firefox 1.5.0.12 (no custom resize cursors in any Firefox version on Mac)
  • Safari 3.1.0-2
  • Safari 3.0.4
  • 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 9.0.0.0-4
  • Netscape 7.2
  • 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)