Floatbox Demo

Set Options

Use this form to try out different floatbox option settings.

Quality hosting by...

Images
HTML
Multimedia
Bonus
iFrames
Code

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" rev="group:pix"><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" rev="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" rev="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.

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

Google News - External content in an iframe with an active caption
<a href="http://news.google.com/" class="floatbox" rev="width:800 height:92% infoPos:tc controlPos:tr caption:`<a href="http://news.google.com/" target="_blank"> Open in a new window  <img src="images/new_window.png" /> </a>`"> Google News</a>

AJAX Content - Content fetched by AJAX
<a href="ajax1" title="AJAX Content" class="floatbox" rev="type:ajax width:450 height:350">AJAX Content</a>

Inline DIV Content - Content fetched from a hidden div on this page
<a href="#inline" title="Inline DIV" class="floatbox" rev="width:507 height:570 scrolling:no">Inline DIV Content</a>

Flash in a Frame (view source) - Flash and QuickTime can be direct-loaded (see below), but you can also load multimedia in an iframe if you like
<a href="kermit" title="Once In a Lifetime" class="floatbox" rev="width:480 height:360 scrolling:no">Flash in a Frame</a>

E-Mailer Form - HTML form in an iframe
<a href="demo_form" title="Demo Form" class="floatbox" rev="width:345 height:525 scrolling:no infoPos: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" rev="width:420 height:190 caption:`RSS News Feed (click the headlines)`">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="demo" class="floatbox" rev="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.

Flash (Tetka) - Direct loading of a flash .swf file
<a href="tetka.swf?scale=default" class="floatbox" rev="sizeRatio:1.618 scrolling:no caption:`Tetka (the mouse works)`">Flash (Tetka)</a>

Silverlight (Globe) - Direct loading of a silverlight .xap file
<a href="silverglobe.xap" class="floatbox" rev="width:640 height:480 scrolling:no caption:`Silverlight sample`">Silverlight (Globe)</a>

Quicktime movie - Direct loading of QuickTime content. (.mov, .mpg, .mpeg & .movie extensions recognized)
<a href="quicktime.mov" class="floatbox" title="Quicktime Example" rev="width:480 height:376 scrolling:no">Quicktime movie</a>

Youtube (Paradise Island) - Direct loading of Youtube content. No need to embed. <a href="http://youtube.com/v/EdGQKGXrkKU&hl=en&fs=1" class="floatbox" rev="width:640 height:518 scrolling:no caption:`Paradise Island`">Youtube (Paradise Island)</a>
Note: the &fs=1 parameter on the youtube querystring enables fullscreen mode. You can also enable hi-definition video by appending &ap=%2526fmt%3D18. Youtube hi-def videos are 480x360px.

Yahoo Video (Andy McKee) - Direct loading of Yahoo Video
<a href="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.4&id=4055094&vid=1110057" class="floatbox" rev="width:388 height:323 scrolling:no caption:`Andy McKee - Ebon Coast`">Yahoo Video (Andy McKee)</a>

Google Video (Unquiet Visions) - Direct loading of Google Video
<a href="http://video.google.com/googleplayer.swf?docId=-270799203995359424&hl=en&playerMode=mini" class="floatbox" rev="width:556 height:372 scrolling:no caption:`Unquiet Visions`">Google Video (Unquiet Visions)</a>

Amazon Video (Adele) - Direct loading of Amazon Video (sorry, no autostart)
<a href="http://g-ecx.images-amazon.com/images/G/01/am3/rc12/AMPlayer.swf?mediaObjectIDList=m338WUB1XI0GQH" class="floatbox" rev="width:420 height:358 scrolling:no caption:`Adele - Hometown Glory`">Amazon Video (Adele)</a>

Metacafe (Natural Wonders) - Direct loading of Metacafe Video (for autostart, append ?playerVars=autoPlay=yes to the href)
<a href="http://www.metacafe.com/fplayer/947767/natural_wonders.swf?playerVars=autoPlay=yes" class="floatbox" rev="sizeRatio:1.25 scrolling:no caption:`Natural Wonders`">Metacafe (Natural Wonders)</a>

Dailymotion (Adrian Belew) - Direct loading of Dailymotion Video (sorry, no autostart)
<a href="http://www.dailymotion.com/swf/k8mRGOgKOiUjxWg4TB" class="floatbox" rev="width:425 height:344 scrolling:no caption:`Adrian Belew - Oh, Daddy`">Dailymotion (Adrian Belew)</a>

MSN Soapbox - MSN Soapbox Video. For flash services like msn that rely on flashvars, put those flashvars into the query string.
<a href="http://images.soapbox.msn.com/flash/soapbox1_1.swf?c=v&v=e647224d-c91e-4a05-88b4-74a028c68f8d&ifs=true" class="floatbox" rev="width:412 height:348 scrolling:no">MSN Soapbox</a>

Vimeo (Where The Hell Is Matt?) - The best for last. This is just great. Thanks Matt!
<a href="http://www.vimeo.com/moogaloop.swf?clip_id=1211060&server=www.vimeo.com&show_title=0 &show_byline=0&show_portrait=0&fullscreen=1" class="floatbox" rev="width:800 height:450 scrolling:no caption:`www.wherethehellismatt.com`">Where The Hell Is Matt?</a>

Odds 'n' Ends

Info and Print links
You can show a second floatbox window containing information about images or other content that is displayed in the primary floatbox. For example, you could use this to show EXIF information for your photos.
You can also enable printing of the floatbox contents (not the whole page) by including a Print button.
Try the "Info..." and "Print..." anchors in the following example.

<a href="images/courthouse.jpg" class="floatbox" title="The Courthouse" rev="showPrint:true info:#sample_info infoOptions:`width:400 height:160 showPrint:true printCSS:/includes/main.css`"><img src="images/courthouse_thm.jpg" alt="" /></a>

Popup thumbnail & Popdown thumbnail - Show a thumbnail image when mousing over an anchor by giving it a class name of "fbPopup" or "fbPopdown".
<a class="floatbox fbPopup" href="images/down_zion_valley.jpg" title="Popup thumbnail sample">Popup thumbnail<img src="images/down_zion_valley_thm.jpg" alt="" /></a>

Plain white styling
<a href="images/ecomobile2.jpg" title="Ecomobiles" class="floatbox" rev="theme:white outerBorder=1 innerBorder=1 padding:24 panelPadding:0 overlayOpacity:0.1 showCaption:false enableDragResize:false"><img src="images/ecomobile2_thm.jpg" alt="ecomobiles thumbnail" /></a>

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

HTML formatted caption. Positioned caption, nav and close button.
<a href="images/ecomobile1.jpg" title="Ecomobile with a formatted caption" class="floatbox" rev="infoPos:bc controlPos:tr padding:28 caption:`html formatted caption (encode html entities for correct parsing)`><img src="images/ecomobile1_thm.jpg" alt="ecomobile thumbnail" /></a>

Image map areas can be floatbox enabled. <img src="images/platonic_solids.jpg" usemap="#plato" alt="platonic solids" />
<map id="plato" name="plato">
<area class="floatbox.plato" shape="poly" coords="6,8,51,8,51,17,39,17,39,31,6,31" href="http://en.wikipedia.org/wiki/Platonic_solid" alt="wikipedia - platonic solid" />
<area class="floatbox.plato" shape="poly" coords="93,6,99,48,58,33" href="images/tetrahedron.png" title="tetrahedron" alt="tetrahedron" />
etc...
</map>

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 framebox.js in action in the bottom frame.

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

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

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({ href:'images/navigateToURL.jpg' })";
  var request:URLRequest = new URLRequest(url);
  navigateToURL(request, "_self");
}

Below are a few examples of 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 rev = 'sameBox:true width:94% height:90% caption:' +
 '`<a href="" onclick="fb.goBack(); return false;">Return to headlines...</a>`';
 parent.fb.start({ href: href, rev: rev });
};
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.)

Stack a Second (or Third) Floatbox
The Set Options form provides a good example of launching a new floatbox from within an existing one. The form contains a link near the top that displays the Options Reference page as a kind of popup help file.
The link looks like this:
<a href="/includes/floatbox/docs/options" class="floatbox" rev="width:85% height:90% caption:`<a href="" onclick="fb.end(); return false;">Return to the options form...</a>`">Options Reference</a>
"sameBox:true" is not in the rev options so this will be a new floatbox instance. The bulk of this example involves setting up the clickable caption that mimics the close button by calling "fb.end()".

Talkin' to an iFrame
Enter something here:
The OK button launches the content with an onclick action of
onclick="fb.start({ href: 'iframe_comm', rev: 'width:320 height: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.document.getElementById(...). See the source for details.

red APOD slideshow
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 "?theme=red".
<a href="apod?theme=red">red APOD slideshow</a>

Thanks for playing