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

Image Gallery

<p class="floatbox" data-fb-options="group:demo1">Image Gallery<br />
  <a href="phang_nga_bay.jpg" title="Phang Nga Bay" data-fb-options="caption2:`Thailand, '03`">
    <img src="phang_nga_bay_thm.jpg" />
  </a>
  ...
  <a href="dusk_dip.jpg" title="Dusk Dip">
    <img src="dusk_dip_thm.jpg" />
  </a>
  ...
</p>

Include Index Links - Shows a series of numbered links with thumbnail popups that allow jumping around within the gallery. <a href="phang_nga_bay.jpg" class="floatbox" data-fb-options="numIndexLinks:-1 colorTheme:white group:demo1 showThis:false enableDragResize:true">Include Index Links</a>

View as Slideshow - Setting 'doSlideshow' to true will make a gallery set auto-advance through a slideshow. (In this example we're using the 'group' and 'showThis' options to reference another gallery set defined elsewhere on the page.) <a href="phang_nga_bay.jpg" class="alt floatbox" data-fb-options="doSlideshow:true group:demo1 showThis:false">View as Slideshow</a>

Slideshow with Options - Here's the same slideshow with some additional appearance options set, including minBox dimensions to tell the floatbox frame area to fill the screen. <a href="phang_nga_bay.jpg" class="alt floatbox" data-fb-options="colorTheme:red imageTransition:slide contentCornerRadius:8 navType:button minBoxWidth:95% minBoxHeight:95% doSlideshow:true group:demo1 showThis:false">Slideshow with Options</a>

In-frame Resizing (click and drag the full-size image)

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 inside the frame. <td class="floatbox" data-fb-options="group:globe controlsPos:tr centerNav:true navType:button maxContentHeight:640 enableWrap:false caption2Pos:br showItemNumber:false caption:href caption2:`&lt;a href='//visibleearth.nasa.gov/'&gt;visibleearth.nasa.gov&lt;/a&gt;`">   In-frame Resizing<br />   <a href="globe_east.jpg"><img src="globe_east.jpg" /></a>   <a href="globe_west.jpg"></a> </td> Note: None of the options shown above are required for in-frame resizing. You get that for free when the 'inFrameResize' option retains its default value of 'true'. The listed options configure the particular gallery set we're using for this example.

Appearance Modifications
Floatbox offers great flexibility and versatility in defining the appearance and behaviour of presented content. The best way to manage a complex set of options used for customization is to bundle those options in a classOptions definition and assign the desired class name to the floatbox link. classOptions can be placed in the options.js file or in an fbClassOptions definition as described in the instructions.

Floatbox (version 5.2+) includes 3 classOptions pre-defined in options.js that can be assigned directly to content links. These are demonstrated below.

class="naked"

class="transparent"

class="alt"

<p class="floatbox">
  <a class="naked" href="ecomobile.jpg"><img src="ecomobile_thm.jpg" /></a>
  <a class="transparent" href="tan.jpg"><img src="tan_thm.jpg" /></a>
  <a class="alt" href="ao_nang.jpg" data-fb-options="caption:`Sunset at Ao Nang` group:demo2">
    <img src="ao_nang_thm.jpg" />
  </a>
  <a href="koh_ha.jpg" data-fb-options="caption:`Beach at Koh Ha` group:demo2"></a>
  <a href="khao_lak.jpg" data-fb-options="caption:`Sunset at Khao Lak` group:demo2"></a>
</p> Note: Classes can be combined in a single class attribute by separating them with spaces.
For example: class="naked floatbox"

Here's a couple of examples of custom fbClassOptions defined directly on this demo page that demonstrate HTML formatted captions, gradient and custom colors, a transparent footer, a customized info link, disabled animation, and positioned captions and control buttons.

View "eco" class options

View "detail" class options

APOD Slideshow
This link navigates to a new page that autoStarts on page load and returns back here when done by using the loadPageOnClose="back" option.
Check out the page source to see how it's put together.

(Don't use this APOD example as a template for how to build a normal slideshow. Use the simple gallery set and "View as Slideshow" example above. This APOD example is demonstrating some advanced features such as autoStart, loadPageOnClose, splitResize, randomOrder, custom background, etc.)

This is the Queen's Chedi near the summit of Doi Inthanon in Chiang Mai province, Thailand. The King's Chedi is just across from it. The grounds here are beautiful and well kept and the views are spectacular.

Doi Inthanon is the highest peak in Thailand at 2,565 metres (8,415 feet). It is always cool up there with average daily highs around 23C. January temperatures can be much lower than that. It's a great place to escape the valley heat and a recommended visit for anyone in the Chiang Mai area.

HTML Content
HTML content can be loaded as an iframe, via an AJAX fetch, or from an inline hidden div.

Floatbox Instructions
- Page loaded as an iframe with "new window" and "print" widgets <a href="instructions" class="floatbox" data-fb-options="width:650 splitResize:true showNewWindow:true showPrint:true enableDragResize:true disableScroll:true">Floatbox Instructions</a>

AJAX Content - Content fetched by AJAX <a href="ajax1" class="floatbox" data-fb-options="type:ajax width:500 caption:`AJAX Content` boxBackgroundImage:body_bg.png">AJAX Content</a>

Inline DIV Content - Content fetched from a hidden div on this page (There's a lot of options set on this example, none of which are required.) <a href="#inline" title="Inline DIV" class="alt floatbox" data-fb-options="contentBackgroundColor: #034c41; boxColor: #083731; innerBorderColor: #3e0e02; overlayColor: grey; colorTheme: red; innerBorder: 2px; outerBorder: 0px; captionPos: tc;">Inline DIV Content</a>

IE 6 end-of-life screen - Please enable the showIE6EndOfLife option on your sites. Visitors using IE 6 or earlier will get a one-time display of the browser upgrade information shown in this example. See the instructions for details.
This example uses Floatbox's fb.executeJS function which then calls fb.start to direct load html in a floatbox.
View the source for details. <a href="/includes/floatbox_571/modules/ie6eol.js?force=true" onclick="fb.executeJS(this.href); return false;">IE 6 end-of-life screen</a>

E-Mailer Form - HTML form in an iframe (Forms can also be loaded from an inline hidden div or an ajax fetch.) <a href="demo_form" title="Demo Form" class="floatbox" data-fb-options="width:343 scrolling:no caption:`Demo Form` captionPos:tc showClose:false">E-Mailer Form</a>

RSS news reader - Here's an RSS news reader running inside floatbox. See the "Code" tab of this demo page for examples of building active floatbox content. <a href="newsfeed/" class="floatbox" data-fb-options="width:420 height:200 measureHTML:no enableDragResize:true caption:`RSS News Feed&lt;br /&gt;&lt;span style=&quot;font-size:.8em;&quot;&gt;(click the headlines)&lt;/span&gt;`">RSS news reader</a>

Multimedia
Floatbox knows how to directly load iframed video embeds, Flash, Silverlight, Quicktime, YouTube and many others. If a required plugin is not available, a link to the plugin download page is displayed. Please see the multimedia section of the instructions for details about creating your multimedia Floatbox links.

Below are some examples of direct loading various media types, both from local files and from online services, using the associated browser plugins. If a site visitor does not have the required plugin installed and active, they will get a message to that effect with a link to the plugin's download page.

Flash (Tetka) - Direct loading of a flash .swf file <a href="tetka.swf?scale=default" class="floatbox" data-fb-options="width:80% height:61.8%w caption:`Tetka (the mouse works)`">Flash (Tetka)</a>

Silverlight (Clock) - Direct loading of a silverlight .xap file <a href="clock.xap" class="floatbox" data-fb-options="width:600 height:300 colorTheme:black caption:`Silverlight sample`">Silverlight (Clock)</a>

Quicktime movie - Direct loading of QuickTime content. (.mov, .mpg, .mpeg, .3gp, .3g2, .m4v, .mp4, .m1v, .mpe, .qt & .movie extensions recognized) <a href="quicktime.mov" class="floatbox" data-fb-options="width:480 height:376 caption:`Quicktime Example`">Quicktime movie</a>

Windows Media Video - Direct loading of Windows Media Video. (.wmv, .wm, .avi and .asf extensions recognized) <a href="big_slip.wmv" class="floatbox" data-fb-options="width:482 height:336 caption:`Windows Media Video`">Windows Media Video</a>

PDF Document - PDF content is loaded as an iframe to allow the browser to handle it as best it can. For some agents, this will result in rendering the document with an installed plugin while others might offer to download the file. <a href="parameters.pdf#page=5&amp;navpanes=0" class="floatbox" data-fb-options="caption:href">PDF Document</a>

Scribd hosted documents - A better way to display PDF and other document formats may be to post them on the scribd.com site and load them in a floatbox from there. Use the path to the document page on scribd as the href. (The scribd path usually includes a long text title component which can safely be left off, as is done in this sample's href listed below.) <a href="//www.scribd.com/doc/62355402/" class="floatbox">Scribd hosted documents</a>
Scribd as type:flash - By default, scribd content will load using their HTML5 iframe embed format. You can force use of their Flash-based viewer by setting "type:flash". The resulting difference is that Flash-less devices such as iPads will get a link to the document on the scribd site instead of the "Tap to view" link provided by Scribd in their iframe embeds. <a href="//www.scribd.com/doc/60882928/?page=2" class="floatbox" data-fb-options="type:flash">Scribd as type flash</a>

YouTube (Playing for change) - Use the 'watch' URL as shown on the YouTube site or the short-form youtu.be link as we're doing in this example. Set type:flash to use the browser's Flash plugin instead of showing the default iframe embed. The "hd=1" parameter requests hi-def video (only for type:flash, not for iframe embeds, and it doesn't make sense to request hd if the video is going to be shown with a width less than 720px). <a href="//www.youtube.com/watch?v=Es3Vsfzdr14&amp;hd=1" class="floatbox" data-fb-options="type:flash width:853 height:480">YouTube (Playing for change)</a> ...or... <a href="//youtu.be/Es3Vsfzdr14?hd=1" class="floatbox" data-fb-options="type:flash width:853 height:480">YouTube (Playing for change)</a>

Vimeo (Where the hell is Matt?) - Direct loading of Vimeo using the Flash plugin <a href="//www.vimeo.com/1211060" class="floatbox" data-fb-options="type:flash">Vimeo (Where the hell is Matt?)</a>

DailyMotion (Adrian Belew) - Any embeddable online video service can be direct-loaded in Floatbox. Grab the embed path from the video service's site and use that as the href. If the embed path is for an iframe embed, place type:video in the options. Otherwise, if it's a Flash embed and the path does not include the '.swf' extension, place type:flash in the options. <a href="//www.dailymotion.com/embed/video/x2a4uf" class="floatbox" data-fb-options="type:video width:480 height:360">DailyMotion (Adrian Belew)</a>

Odds 'n' Ends

Image and Thumbnail Cycler
Setup up a div with a class name of "fbCycler" to cycle through a set of thumbnails or images. See the instructions for specific configuration requirements and recommendations (including what's going on with those "data-fb-src" attributes).

The cycling thumbnails to the left are also floatbox-enabled links. Clicking on the thumbnails opens the associated images in an integrated Floatbox gallery.

<div class="fbCycler floatbox alt" data-fb-options="cyclePauseOnHover:true group:utah imageFadeDuration:0" style="height:112px;">
  <a href="courthouse.jpg">
    <img src="courthouse_thm.jpg" title="the courthouse" />
  </a>
  <a href="zion_valley.jpg">
    <img data-fb-src="zion_valley_thm.jpg" title="zion valley" />
  </a>
  etc...
</div>

hide/show cycling images

<div class="fbCycler" style="height:420px;">
  <img src="dirt_biking_to_rom_pho_tai.jpg" title="dirt biking to Rom Pho Tai" />
  <img data-fb-src="the_road_less_travelled.jpg" title="the road less travelled" />
  etc...
  <img data-fb-src="roadside_adoption.jpg" />
</div>

Popup Thumbnails
Popup, Popdown, Popcenter, Popleft & Popright thumbnails - Show a thumbnail image when mousing over an anchor by giving it a class name of "fbPopup", "fbPopdown", "fbPopcenter", "fbPopleft" or "fbPopright". (They don't need a class of "floatbox". If that's not there, the anchors will work as normal links.) <a class="floatbox fbPopup" href="buzzard.jpg" data-fb-options="caption:`Buzzard in Utah`">Popup<img src="buzzard_thm.jpg" /></a>

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.
<a class="floatbox fbPopcenter" href="twin_lakes.jpg">
  <img src="twin_lakes_thm.jpg" width="100" height="75" />
  <img src="twin_lakes_thm.jpg" width="67" height="50" />
</a>

Info link, Print link, and a Tooltip
Use the 'info' option to show a second floatbox window containing information about images or other content that is displayed in the primary floatbox. This could, for example, show EXIF information for the displayed photos.
The 'showPrint' option will setup a print link that allows visitors to print just the contents of the current floatbox.
The 'tooltip' option assigns an enhanced tooltip to the floatbox content.
See these things in action in the following example.

<a href="silver_sea.jpg" class="floatbox" data-fb-options="showPrint:true info:#sample_info infoOptions:`width:400 showPrint:true printCSS:/includes/main.css contentBackgroundColor:#ffffe7` tooltip:#tooltip4 tooltipOptions:`showOnce:true timeout:5.5 moveWithMouse:true` caption2:`Sailing a Silver Sea`"><img src="silver_sea_thm.jpg" /></a>

More Odds 'n' Ends

Enhanced Tooltips
Floatbox tooltips can be attached to any element on a page.
Mouseover the following examples to get an idea of what can be done.

Tooltip attached to an image: <img class="fbTooltip" data-fb-tooltip="source:#tooltip1 attachToHost:true" src="tulip-icon.png" />

or... a tooltip can move with the mouse. <a class="fbTooltip" data-fb-tooltip="source:#tooltip2 moveWithMouse:true" href="javascript:void 0">a tooltip can move with the mouse</a>

and... tooltips can be placed above, below, centered or on either side of the element or cursor. <a class="fbTooltip" data-fb-tooltip="source:#tooltip3 moveWithMouse:true placement:top colorTheme:black contentBackgroundColor:black outerBorder:0" href="javascript:void 0">tooltips can be placed above or on either side of the element or cursor</a>

The above examples use an inline hidden div for the tooltip source, but any floatbox content type can be the source. Here's a tooltip that has an image source, is placed to the left of the host element, attaches to the host element, is set to timeout after 3 seconds, and sets the cursor to the default arrow.

It's Gumby damn it!!!

This is a static tooltip. Tooltips can be styled with html/css and all the usual Floatbox settings.
The flower is a clickable anchor.

Tooltips that aren't attached to the host element can't have interactive content.
(Well, they can, but you can't get to it.)

This tooltip was added to the floatbox using the 'tooltip' option and uses the 'showOnce' and 'timeout' options to limit its display.
→ Be sure to try out the Info and Print links below ←

Context Boxes
Similar to the enhanced tooltips, context boxes can be configured to appear on left and/or right mouse clicks and to close on the next click.

Touch or click here with either mouse button <a href="" class="fbContext" data-fb-context="source:#context1">Touch or click here with either mouse button</a>

And here's a cool little value picker built from a context box and three enhanced tooltips, all coming from hidden divs on this page:

View the source page of a stand-alone implementation of this example. <input class="fbContext" data-fb-context="source:#picker width:180" type="text" id="chooser" size="18" value="click to pick..." />

Non-Modal Boxes
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.

non-modal sample #1
non-modal sample #2
non-modal sample #3 <p class="floatbox" data-fb-options="modal:false disableScroll:true width:280 scrolling:no enableDragResize:true cornerRadius:4 padding:12 colorTheme:yellow, contentBackgroundColor:#ffffe7">
<a href="#nonmodal1" data-fb-options="caption:`non-modal #1` boxLeft:+66% boxTop:200">non-modal sample #1</a>
...etc...
</p>

Image Maps
To light up image map areas, put the same markup on the area elements that would be added to anchor elements.
In this example, the "floatbox" class and data-fb-options are inherited by each area element from the containing map element, avoiding the need to repeat them.
Most of the options set here are not required. We could have just allowed the defaults.
The options inside the back-quoted "infoOptions" subset are for the secondary "Animate" box.

<img src="solids.jpg" usemap="#plato" />
<map id="plato" name="plato" class="floatbox plato">
<area shape="rect" coords="6,7,51,32" href="//en.wikipedia.org/wiki/Platonic_solid"
  data-fb-options="group:null" />
<area shape="poly" coords="60,12,103,6,89,48" href="tetrahedron.png"
  data-fb-options="info:tetrahedron.gif" title="tetrahedron" />
<area shape="poly" coords="124,6,148,15,153,29,139,47,112,39,114,25" href="hexahedron.png"
  data-fb-options="info:hexahedron.gif" title="hexahedron" />
etc...
</map> View "plato" class options
(assigned to the map element and inherited by the area elements)

Programmability
See the API reference page for details about Floatbox library functions that can be called from your content.

Working with dynamic AJAX content
Using the fb.ajax function is a great way to add dynamic, interactive content to your web pages.
Here's an example that brings in three different sets of image galleries via AJAX. ==> Bring it on! <button type="button" onclick="fb.ajax({ source:'gallery', updateNode:'ajaxDiv' });">Bring it on!</button>
<div id="ajaxDiv"></div>

Launch floatbox from a flash object
Note: An easy way to embed flash is with Floatbox's flashObject function. Like this:
<script type="text/javascript">
fb.flashObject({
  source: 'getURL.swf?wmode=direct',
  altContent: '<a href="getURL.png" onclick="fb.start(this); return false;">getURL.png</a>',
  width: 80,
  height: 30
}); </script>
See the API Reference for details and additional parameters.

How to invoke floatbox from a Flash ActionScript 2 button using getURL
btn.onRelease = function() {
  getURL("javascript:fb.start('getURL.png')");
};

Floatbox from a Flash ActionScript 3 mouse event using navigateToURL
btn.addEventListener(MouseEvent.CLICK, myFunc);
function myFunc(event:MouseEvent):void {
  var url:String = "javascript:fb.start('navigateToURL.png')";
  var request:URLRequest = new URLRequest(url);
  navigateToURL(request, "_self");
}

Google Maps
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 itself open up in another floatbox. View the map source page of the following example, including the marker, and check out the Google Maps V3 tutorial.

 Show me the way! <a href="googleMap" class="alt floatbox" data-fb-options="width:500 height:500 scrolling:no">Show me the way!</a>

Floatbox code in iframe content

In-place update of floatbox content
Show me  ← Go ahead, click it
View the source of iframe_update1 and iframe_update2 to see the content and code that makes this happen.

The RSS news reader gives a more useful example of programmatically changing content within a floatbox. Each headline in an RSS newsfeed is given an onclick action of onclick="return rsstick_onclick(this.href);"
The function invoked by onclick looks like this: function rsstick_onclick(href) { // headline onclick handler for floatbox
  parent.fb.start(href, {
    mobileNewWindow: true,
    sameBox: true,
    width: '94%',
    height: '90%',
    caption: '<a href="" onclick="fb.goBack(); return false;"><b>Return to headlines...</b></a>'
  });
  return false;
};

This function uses Floatbox's "start" function to launch the news story linked from the headline in the existing floatbox ("sameBox:true") and sets up a clickable anchor in the caption area that invokes Floatbox's "goBack" function to return to the previously shown headline ticker.

Exchange data with a floatboxed iframe
Enter something here:  
The OK button launches the content with an onclick action of onclick="fb.start('iframe_comm', 'modal:false width:320 scrolling:no innerBorder:3');"
The content inside iframe_comm exchanges info with the parent page by having ids set on the text boxes and finding those text boxes with calls like parent.fb.$('id'). See the source for details.

Stack a Second (or Third) Floatbox
The Set Options form provides a good example of launching a new floatbox from within an existing one (and of using non-modal boxes to show adjacent windows). The form contains a link near the top that displays the Options Reference page as a kind of popup help file.
The link inside the set_options form looks like this: <a href="options" class="floatbox"
  data-fb-options="modal:false boxLeft:25 width:580 height:90% controlsPos:tr enableDragResize:true disableScroll:true">
  <b>Options Reference</b>
</a>
"sameBox:true" is not in data-fb-options so this will be a new floatbox instance. (A "rev" attribute can be used in place of "data-fb-options" - they are equivalent.)

red APOD slideshow
If enableQueryStringOptions is set to true in fbPageOptions, you can set floatbox options in a page's url querystring. This can be quite helpful when testing out settings and options. Here's the APOD slideshow modified with the querystring "?colorTheme=red&amp;minBoxWidth=95%25&amp;minBoxHeight=95%25&amp;imageTransition=slide".
(Note: %25 is the HTML code for the percent sign (%). This and the ampersands must be encoded in href URI references.) <a href="apod?colorTheme=red&amp;minBoxWidth=95%25&amp;minBoxHeight=95%25">red APOD slideshow</a>

Workin' with iFrames
Demo of floatbox loading from an iframe inside an iframe. Notice how items can be grouped in a set gathered from different iframes. Also shows floatbox constrained to within an iframe down at the bottom.