Floatbox Demo

Set Options

Use this form to try out different floatbox option settings.

Demo/Test
Samples of things you can do with floatbox. Below each sample is the html code used to generate it.

Image Gallery

<a href="images/phang_nga_bay.jpg" class="floatbox" title="Phang Nga Bay" data-fb-options="group:pix caption2:`Thailand, '03`"><img src="images/phang_nga_bay_thm.jpg" alt="" /></a>
etc...

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

View as Slideshow - A slideshow of a gallery can be started from a link outside of the gallery group. <a href="" class="floatbox" data-fb-options="doSlideshow:true showThis:false navType:button group:pix">View as Slideshow</a>

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. (warning: big images - not for the modemly challenged)
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 how you can use a variety of more advanced features such as autoStart, loadPageOnClose, splitResize, randomOrder, fbTypeOptions, custom background, etc.)

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 a "new window" button <a href="/includes/floatbox/docs/instructions" class="floatbox" data-fb-options="width:650 height:92% disableScroll:true showNewWindow: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`">AJAX Content</a>

Inline DIV Content - Content fetched from a hidden div on this page <a href="#inline" title="Inline DIV" class="floatbox">Inline DIV Content</a>

IE 6 end-of-life screen - Please enable this on your sites. See the instructions for details. <a href="ie6eol" class="floatbox"
  data-fb-options="type:ajax width:816 controlsPos:tr enableDragMove:false enableDragResize:false
  caption:`<input type="checkbox" id="noshow" /> Don't show this again (requires permanent cookie)`">
  IE 6 end-of-life screen
</a>

Flash (flowplayer) in an iframe ( view source ) - Flash and QuickTime can be direct-loaded (see below), but you can also load multimedia in an iframe if you like. This example is using flowplayer to play a .flv movie. <a href="kermit" title="Once In a Lifetime" class="floatbox" data-fb-options="width:480 height:384 scrolling:no color:blue enableDragResize:false roundBorder:0">Flash (flowplayer) in a Frame</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:345 height:525 scrolling:no caption:`Demo Form` captionPos:tc showClose:false enableDragResize: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:190 caption:`RSS News Feed<br /><span style="font-size:.8em;">(click the headlines)</span>`">RSS news reader</a>

Nested (Stacked) Floatbox Content - Here's an odd thing to do. This link re-opens this demo/test page inside a new floatbox. From there you can load other floatbox content or navigate the entire site. <a href="#" class="floatbox" data-fb-options="width:93% height:90%">Nested (Stacked) Floatbox Content</a>

Multimedia
Floatbox knows how to directly load Flash, Silverlight, Quicktime, Youtube and many others. If the 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.

Flash (Tetka) - Direct loading of a flash .swf file <a href="tetka.swf?scale=default" class="floatbox" data-fb-options="sizeRatio:1.618 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 color:black caption:`Silverlight sample`">Silverlight (Clock)</a>

Quicktime movie - Direct loading of QuickTime content. (.mov, .mpg, .mpeg, .3gp, .3g2, .m4v, .mp4, .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 - Direct loading of PDF docs with the Adobe Reader plugin. (See the 'bonus' tab for an example of opening pdf as flash from the scribd.com site.) <a href="pdf_open_parameters.pdf#page=5&navpanes=0" class="floatbox" data-fb-options="height:95%">PDF Document</a>

Youtube (Paradise Island) - Just paste the URL from the youtube site into the href of your anchor. <a href="http://www.youtube.com/watch?v=EdGQKGXrkKU" class="floatbox" data-fb-options="width:640 height:505 caption:`Paradise Island`">Youtube (Paradise Island)</a>
Youtube (French Taunter) - Or you can use the embed path as your href. <a href="http://www.youtube.com/v/b5R4-ryRLAY" class="floatbox" data-fb-options="width:640 height:505 caption:`The Holy Grail`">Youtube (French Taunter)</a>

Yahoo Video (Andy McKee) - For Yahoo Video, paste the URL from the video.yahoo.com site. <a href="http://video.yahoo.com/watch/1110057/4055094" class="floatbox" data-fb-options="width:388 height:323 caption:`Andy McKee - Ebon Coast`">Yahoo Video (Andy McKee)</a>
Yahoo Video (Amy Winehouse) - Or, use the embed path as your href. <a .yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?id=4420402&vid=1259980" class="floatbox" data-fb-options="width:512 height:322 caption:`Amy Winehouse - Back to Black`">Yahoo Video (Amy Winehouse)</a>

Vimeo (Where The Hell Is Matt?) - This is just great. Thanks Matt! <a href="http://www.vimeo.com/1211060" class="floatbox" data-fb-options="width:800 height:450 caption:`www.wherethehellismatt.com`">Vimeo (Where The Hell Is Matt?)</a>
Vimeo (Matt's first) - Or load Vimeo using the embed syntax <a href="http://www.vimeo.com/moogaloop.swf?clip_id=1019038&fullscreen=1" class="floatbox" data-fb-options="width:400 height:302 caption:`www.wherethehellismatt.com`">Vimeo (Matt's first)</a>

Vevo (Jamie Cullum) - Vevo.com music video service (sorry, no autoplay & shows ads) <a href="http://www.vevo.com/watch/GBL420300004" class="floatbox" data-fb-options="sizeRatio:575/324">Vevo (Jamie Cullum)</a>
Vevo (4 Non Blondes) - Or use Vevo's embed syntax <a href="http://www.vevo.com/VideoPlayer/Embedded?videoId=USUV70501008" class="floatbox" data-fb-options="sizeRatio:575/324">Vevo (4 Non Blondes)</a>

Google Video (Jake Shimabukuro) - Direct loading of Google Video <a ogleplayer.swf?docId=1352016870638076087&hl=en&playerMode=mini" class="floatbox" data-fb-options="width:400 height:300 caption2:`While My Ukelele Gently Weeps`">Google Video (Jake Shimabukuro)</a>

expert

Metacafe (Natural Wonders) - Direct loading of Metacafe Video <a href="http://www.metacafe.com/fplayer/947767/natural_wonders.swf" class="floatbox" data-fb-options="sizeRatio:1.25 caption:`Natural Wonders`">Metacafe (Natural Wonders)</a>

Dailymotion (Adrian Belew) - Direct loading of Dailymotion Video <a href="http://www.dailymotion.com/swf/k8mRGOgKOiUjxWg4TB" class="floatbox" data-fb-options="width:425 height:344 caption:`Adrian Belew - Oh, Daddy`">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 courthouse

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" style="height:112px;" data-fb-options="cyclePauseOnHover:true">
  <a href="images/courthouse.jpg" data-fb-options="group:utah">
    <img src="images/courthouse_thm.jpg" alt="" />
    <span>the courthouse</span>
  </a>
  <a style="display:none;" href="images/zion_valley.jpg" data-fb-options="group:utah">
    <img data-fb-src="images/zion_valley_thm.jpg" alt="" />
    <span>zion valley</span>
  </a>
  etc...
</div>

hide/show cycling images

dirt biking to Rom Pho Tai

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

Popup Thumbnails
Popup , Popdown , Popleft & Popright thumbnails - Show a thumbnail image when mousing over an anchor by giving it a class name of "fbPopup", "fbPopdown", "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="images/twin_lakes.jpg" data-fb-options="caption:`Twin Lakes, Colorado`">Popup<img src="images/twin_lakes_thm.jpg" alt="" /></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. You could, for example, use this to show EXIF information for your 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="images/silver_sea.jpg" class="floatbox" data-fb-options="showPrint:true info:#sample_info infoOptions:`width:400 showPrint:true printCSS:/includes/main.css backgroundColor:#ffffe7 enableDragResize:false` tooltip:#tooltip4 tooltipOptions:`moveWithMouse:true` caption:`Sailing a Silver Sea`"><img src="images/silver_sea_thm.jpg" alt="" /></a>

Appearance Modifications
Many of floatbox options are for setting appearance and behaviour preferences. Here's 3 samples showing some of the things you can do.

Plain white styling <a href="images/ecomobile2.jpg" class="floatbox" data-fb-options="color:white padding:24 panelPadding:0 overlayOpacity:0.1 enableDragResize:false caption:`Ecomobiles`"><img src="images/ecomobile2_thm.jpg" alt="ecomobiles thumbnail" /></a>

Naked image (click it closes it) <a href="images/ecomobile3.jpg" class="floatbox" data-fb-options="outerBorder:0 innerBorder:0 padding:0 panelPadding:0 roundCorners:none showClose:false enableDragResize:false imageClickCloses:true"><img src="images/ecomobile3_thm.jpg" alt="ecomobile thumbnail" /></a>

HTML formatted caption with positioned captions, nav and close button. <a href="images/ecomobile1.jpg" class="floatbox" data-fb-options="captionPos:tl caption2Pos:br controlsPos:tr padding:28 roundCorners:none outerBorder:2 caption:`<b>html formatted caption</b><br /><span style="font-size:9px;">(encode html entities for correct parsing)</span>` caption2:`Here's a second caption`"><img src="images/ecomobile1_thm.jpg" alt="ecomobile thumbnail" /></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="images/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 the element or cursor . <a class="fbTooltip" data-fb-tooltip="source:#tooltip3 moveWithMouse:true placeAbove:true color:black outerBorder:0" href="javascript:void(0)">tooltips can be placed above 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, sets the cursor to the default arrow, and is set to timeout after 4 seconds.

It's Gumby damn it!!!

<td class="fbTooltip" data-fb-tooltip="source:`images/and_pokey.jpg` timeout:4 defaultCursor:true roundCorners:none"...

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. Option settings for these samples are assigned using fbClassOptions on this page and look like this: nonmodalSample: 'modal:false disableScroll:true width:280 scrolling:no cornerRadius:4 padding:12 color:yellow, backgroundColor:#ffffe7'

non-modal sample #1
non-modal sample #2
non-modal sample #3 <a href="#nonmodal1" class="floatbox nonmodalSample" data-fb-options="caption:`non-modal #1` boxLeft:+66% boxTop:200">non-modal sample #1</a>

The Set Options form provides a good practical example of using non-modal boxes to show adjacent windows. Click on the 'Options Reference' link in that form to open the second box. The non-modal presentation allows both the form and the reference to be accessed at the same time.

PDF (and other) Documents
You can direct load PDF documents using the Adobe Reader plugin (see the sample on the multimedia tab), but the flash plugin is more broadly installed. One good way to show pdf docs in floatbox with flash is to go through the Scribd document hosting service.
Here are the steps:

Post your document to the scribd service
Get the embed code for your document from scribd
Pull the (long) url out of that embed code's movie parameter value
Use that url as the href target of your floatbox anchor.

Here's what a floatbox link to a hosted pdf document looks like:

Note - 2010/04/22: IE is showing actionscript errors from the scribd viewer on floatbox exit. Other browsers are fine. :-(

Image Maps
To light up your image map areas, put the same markup on your area elements that you would add to your anchor elements. (Note that the "floatbox" class and data-fb-options are on the containing map element in this example but that they could go on each area element instead.)

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

AJAX! We've got AJAX!
Here's how easy it is to dynamically update a page using the fb.ajax function.
Add content to the currently empty div that's right below this example by clicking: <button type="button" onclick="fb.ajax({ source:'ajaxFetch', updateNode:'ajaxDiv' });">AJAX me!</button>
<div id="ajaxDiv"></div>

Launch floatbox from a flash object
Note: An easy way to embed flash on your page is with floatbox's flashObject function. Like this:
<script type="text/javascript">fb.flashObject('getURL.swf', 80, 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('images/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('images/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="floatbox" data-fb-options="width:500 height:500 scrolling:no controlsPos:tr">Show me the way!</a>

Floatbox code in iframe content

Update in place - In-place change of floatbox content and appearance
View the source of iframe_update1 and iframe_update2 to see the internal content code that makes this happen.

The RSS news reader gives a more complete and useful example of programming behaviour within a floatbox. Each headline is given an onclick action of onclick="rsstick_onclick(this.href); return false;"
The function invoked by onclick looks like this: function rsstick_onclick(href) { // headline onclick handler for floatbox
  var options = 'sameBox:true width:94% height:90% caption:' +
  '`<a href="" onclick="fb.instances[fb.ownerInstance(this)].goBack(); return false;"><b>Return to headlines...</b></a>`';
  parent.fb.start(href, options);
};
This function uses floatbox's "start" function to launch the news story linked to by 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 previous RSS ticker. (You need those back-quotes around the caption string.)
If you're not using multiple non-modal floatboxes, you can simplify the goBack call with fb.goBack(); for a single floatbox or fb.lastChild.goBack(); for the topmost secondary floatbox.

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_reference" class="floatbox"
data-fb-options="modal:false boxLeft:25 width:580 height:90% controlsPos:tr">
<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.)

Talkin' to an iFrame
Enter something here:
The OK button launches the content with an onclick action of onclick="fb.start('iframe_comm', 'width:320 height:230 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.

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 "?colorImages=red". <a href="apod?colorImages=red">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.

Thanks for playing