This page is all about web developers content css javascript html xhtml editors code php asp.net flash cgi ajax photography animation image site design graphics and cms.

Floatbox: The premier javascript windowing system

What is Floatbox?

Floatbox is a javascript library for displaying windowed content over top of web pages. It can be considered a 'lightbox clone' with great image gallery capabilities, but also extends that model with support for all types of content and strong programmability for '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+
  • SeaMonkey 1.1+
  • Opera 9.1+
  • Camino 1.5+
  • Netscape 7.2+

Features

  • Native handling and display of the following content types:
    • Standalone images
    • Image galleries
    • Slideshows
    • AJAX html content
    • Iframe html content
    • Inline hidden divs
    • Flash
    • Silverlight
    • Quicktime
    • Online multi-media services (YouTube, Yahoo Video, etc., etc.)
    • Mixed content-type gallery sets
  • Extensive and flexible control over floatbox's behaviour and appearance through numerous configuration options
  • Ability to set options globally, page-specific 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 and css as required to optimize initial load time
  • Quick image loads due to aggressive preloading (which can optionally be turned off)
  • Can auto-create a floatboxed gallery of images with no additional html markup on the page
  • Live zooming of images from the thumbnail to the floatbox display on start and end
  • Popup thumbnails that appear when the mouse is over an anchor
  • Round corners with selectable radius of 8, 12 and 20px, or classic square corners
  • Shadow effect, configurable for drop shadow (2-sided) or halo effect (4-sided) and shadow thickness
  • Language localization of tooltips and other text with automatic support for 29 (and counting) different languages
  • Control gadgets automatically display without text for non-English browsers
  • Vertical and horizontal centering of images under (almost) 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
  • Resize button for content that is bigger than the screen or has been resized smaller
  • The display box can be moved and resized with mouse drags
  • Click on image with a magnifying glass cursor to resize
  • Programmability: you can load floatbox from script, control it from code within its content, start from flash, etc.
  • User-defined callback functions for onItemStart, onItemEnd, beforeBoxStart, afterBoxStart, beforeBoxEnd, afterBoxEnd and onPrint
  • 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
  • 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 XHTHL 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
  • Includes 5 different color themes for flexible integration with different sites and content
  • Ability to define your own custom color theme in the css
  • 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.

Known Problems:

  • No round corners for ie6 (cleanly falls back to square corners).
  • No flash from inline divs - direct load, iframe or ajax for all multimedia please.
  • No fixed positioning in ie6 (disableScroll doesn't work).
  • In Google Chrome, the box can drift upwards when centerOnResize is enabled and the browser window is narrowed.
  • Some flash files won't play well with ff2/mac.
  • For flash in SeaMonkey, and both quicktime and flash in Firefox 2.x, the page won't be scrollable (content might be bigger than window, but at least it's still draggable).
  • FF2 forms cursor won't blink if form is bigger than the window.
  • Firefox's back button won't work correctly after an iframe's content has been updated. (Not floatbox-specific)

Tested on:

Windows XP SP2 & SP3
  • Firefox 3.0.0-10
  • Firefox 2.0.0.11-16
  • IE 8.0
  • IE 7.0
  • IE 6.0
  • Safari 3.0.3-4, 3.1.0-2
  • Safari 4 beta
  • Netscape 9.0.0.6
  • Opera 9.50-64 (no custom resize cursors)
  • Opera 9.25-27 (no custom resize cursors)
  • Chrome 2.0
  • Chrome 1.0
  • Chrome 0.2-0.3
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 and caption 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)
Windows Vista
  • IE 7.0
  • Firefox 3.0.3
  • Opera 9.10, 9.52 (no custom resize cursors)
  • Safari 3.1.2