Floatbox Demo Page

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

Set Options - Be sure to experiment with the different option settings here.
<a href="set_options.html" rel="floatbox" rev="width:550 height:720 showClose:false">Set Options</a>

Image Gallery

<a href="images/phang_nga_bay.jpg" rel="floatbox.pix" title="Phang Nga Bay"><img src="images/phang_nga_bay_thm.jpg" alt="" /></a>
etc...

View as Slideshow - A slideshow of a gallery can be started from a link outside of the gallery group.
<a href="" rel="floatbox.pix" rev="doSlideshow:true showThis:false endTask:exit navType:none">View as Slideshow</a>

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

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

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.

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
<a href="http://news.google.com/" rel="floatbox" rev="width:800 height:max caption:href">Google News</a>

Contact Form - Contact form in an iframe
<a href="contact.html" title="Contact Form" rel="floatbox" rev="width:340 height:510 scrolling:no">Contact Form</a>

AJAX Content - Content fetched by AJAX
<a href="ajax1.html" title="AJAX Content" rel="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" rel="floatbox" rev="width:600 height:350">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 for more control over parameters
<a href="kermit.html" title="Once In a Lifetime" rel="floatbox" rev="width:480 height:360 scrolling:no">Flash in a Frame</a>

RSS news reader - Here's an RSS news reader running inside floatbox. See the "Programmability" section below for details about building active floatbox content.
<a href="newsfeed/" rel="floatbox" rev="width:420 height:190 caption:`RSS News Feed (click the headlines)`">RSS news reader</a>

Nested (Stacked) Floatbox Content - This link opens the entire iFrame demo/test page inside a floatbox. From there you can load other floatbox content or navigate the entire site.
<a href="ifdemo.php" rel="floatbox" rev="width:93% height:90%">Nested (Stacked) Floatbox Content</a>

Multimedia
Floatbox knows how to directly load Flash, QuickTime, YouTube and 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" rel="floatbox" rev="width:90% height:85% scrolling:no caption:`Tetka (the mouse works)`">Flash (Tetka)</a>

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

YouTube (Adrian Belew) - Direct loading of YouTube content. No need to embed.
(Are you seeing "We're sorry, this video is no longer available"? click here) <a href="http://youtube.com/v/Tz8dX7HNvvw&hl=en" rel="floatbox" rev="width:425 height:344 scrolling:no caption:`Adrian Belew - Oh, Daddy`">YouTube (Adrian Belew)</a>

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" rel="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" rel="floatbox" rev="width:556 height:372 scrolling:no caption:`Unquiet Visions`">Google Video (Unquiet Visions)</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=e5b86797-ddb5-490c-b759-0346a00f5ff0" rel="floatbox" rev="width:412 height:348 scrolling:no">MSN Soapbox</a>

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" rel="floatbox" rev="width:800 height:450 scrolling:no caption:`www.wherethehellismatt.com`">Where The Hell Is Matt?</a>

Odds 'n' Ends

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

HTML formatted caption, positioned caption and close, no animations
<a href="images/ecomobile.jpg" title="Ecomobile with a formatted caption" rel="floatbox" rev="infoPos:bc controlPos:tr doAnimations:false padding:28 caption:`html formatted caption (encode html entities for correct parsing)`><img src="images/ecomobile_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 shape="poly" coords="6,8,51,8,51,17,39,17,39,31,6,31" href="http://en.wikipedia.org/wiki/Platonic_solid" rel="floatbox" rev="width:750 height:max" alt="wikipedia - platonic solid" />
<area shape="poly" coords="93,6,99,48,58,33" href="images/tetrahedron.png" rel="floatbox.plato" title="tetrahedron" alt="tetrahedron" />
etc...
</map>

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.

red APOD slideshow
You can set floatbox options in a page's url querystring. Here we are using "?theme=red".
<a href="apod.html?theme=red">red APOD slideshow</a>

Programmability
See the instructions page for details about the floatbox functions that can be called from your content.
Below are some examples of floatbox code in iframe content.

Update in place - In-place change of floatbox content and appearance
View the source of iframe_update1.html and iframe_update2.html 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="return rsstick_onclick(this.href);"
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.loadAnchor(href, rev);
 return false;
};
This function uses floatbox's "loadAnchor" 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="/floatbox/docs/options.html" rel="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.loadAnchor('iframe_comm.html', 'width:320 height:320 scrolling:no innerBorder:3');"
The content inside iframe_comm.html 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.

Thanks for playing

Floatbox: A freeware lightbox clone