Image Gallery

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

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:demo1 showThis:false enableDragResize:true">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:demo1">View as Slideshow</a>

In-frame Resizing

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. <a href="images/discovery_iss.jpg" class="floatbox" data-fb-options="controlsPos:tr maxContentHeight:640"><img src="images/discovery_iss_thm.jpg" alt="" /></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.
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.)

Appearance Modifications
Many of the Floatbox options are for setting appearance and behaviour preferences. Here's some samples showing some of the things that can be done.

View product detail.
The best approach for something like this is to define classOptions settings in options.js and then assign the designated class to items to be opened with those options.
Click here to see what those classOptions look like for this example. <a href="images/vase.jpg" class="floatbox detail"><img src="images/vase_thm.jpg" width="46" height="65" alt="" /></a>

HTML formatted captions, transparent footer, background gradient image, custom colors, customized info link, and positioned captions, nav, close button and index links.
Like the product sample above, the customized options for this example are assigned via classOptions - in this case to the class name 'eco'.
Click here to see the 'eco' classOptions. <p class="floatbox eco">
<a href="images/ecomobile1.jpg"><img src="images/ecomobile1_thm.jpg" width="65" height="43" alt="" /></a>
<a href="images/ecomobile2.jpg"></a>
<a href="images/ecomobile3.jpg"></a>
</p>

Naked image <a href="images/ecomobile3.jpg" class="floatbox" data-fb-options="outerBorder:0 innerBorder:0 padding:0 panelPadding:0 zoomBorder:0 roundCorners:none showClose:false showOuterClose:true inFrameResize:false"><img src="images/ecomobile3_thm.jpg" alt="" /></a>

Plain white styling, no overlay <a href="images/ecomobile2.jpg" class="floatbox" data-fb-options="colorTheme:white padding:20 panelPadding:4 overlayOpacity:0 caption:Ecomobiles"><img src="images/ecomobile2_thm.jpg" alt="" /></a>

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 a "new window" button <a href="instructions" class="floatbox" data-fb-options="width:650 height:92% splitResize:auto disableScroll:true showNewWindow:true showPrint:true mobileNewWindow:true enableDragResize: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:/images/body_bg.png">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 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 executeJS function to direct load html in a floatbox.
View the source for details. <a href="ie6eol.js" onclick="fb.executeJS('ie6eol.js'); 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:345 height:460 scrolling:no zoomSource:demo_form.png caption:`Demo Form` captionPos:tc showClose:false">E-Mailer Form</a>

Nested (Stacked) Floatbox Content - 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.
This isn't particularly useful, but it's a good test of Floatbox's correct handling of complex iframe content. <a href="demo?" class="floatbox" data-fb-options="width:93% height:90%">Nested (Stacked) Floatbox Content</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 - Direct loading of PDF docs with the Adobe Reader plugin. (See the 'Bonus 2' tab for an example of opening pdf as flash from the scribd.com site.) <a href="parameters.pdf#page=5&amp;navpanes=0" class="floatbox" data-fb-options="caption:href">PDF Document</a>

YouTube (Slo-mo surfer) - Just paste the URL from the YouTube site into the href of the anchor. 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. <a href="//www.youtube.com/watch?v=7BOhDaJH0m4&amp;hd=1" class="floatbox" data-fb-options="type:flash width:853 height:480">YouTube (Slo-mo surfer)</a>

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

DailyMotion (Adrian Belew) - DailyMotion video direct-loaded as Flash <a href="//www.dailymotion.com/video/k8mRGOgKOiUjxWg4TB" class="floatbox" data-fb-options="type:flash">DailyMotion (Adrian Belew)</a>

Vevo (Sting) - 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="//videoplayer.vevo.com/embed/embedded?videoId=USIV20500266" class="floatbox" data-fb-options="type:flash width:80% height:56%w">Vevo (Sting)</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 zion valley angel's landing landscape arch

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" data-fb-options="cyclePauseOnHover:true group:utah imageFadeDuration:0 centerNav:true" style="height:112px;">
  <a href="images/courthouse.jpg">
    <img src="images/courthouse_thm.jpg" alt="" />
    <span>the courthouse</span>
  </a>
  <a href="images/zion_valley.jpg">
    <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

the road less travelled

buddhist weirdness

ridge road to Doi Phukha

ridge road to Doi Phukha

elephant conservation center

<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>
    <img data-fb-src="images/the_road_less_travelled.jpg" alt="" />
    <span>the road less travelled</span>
  </div>
  etc...
  <img data-fb-src="images/roadside_adoption.jpg" alt="" />
</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="images/buzzard.jpg" data-fb-options="caption:`Buzzard in Utah`">Popup<img src="images/buzzard_thm.jpg" alt="" /></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="images/twin_lakes.jpg">
  <img src="images/twin_lakes_thm.jpg" width="100" height="75" alt="" />
  <img src="images/twin_lakes_thm.jpg" width="67" height="50" 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 contentBackgroundColor:#ffffe7` tooltip:#tooltip4 tooltipOptions:`moveWithMouse:true` caption:`Sailing a Silver Sea`"><img src="images/silver_sea_thm.jpg" alt="" /></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, 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.)

Here's the tooltip we added.
Be sure to try out the Info and Print links below.

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>

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 floatboxed anchor.

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

<a href="//d1.scribdassets.com/ScribdViewer.swf?document_id=20617296&amp;access_key=key-1yn3xqfh0f21ybkkzslp&amp;page=1&amp;version=1&amp;viewMode=list" class="floatbox" data-fb-options="width:800 height:96%"><img src="images/pdf.jpg" alt="pdf" style="border:none;" /></a>

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="images/plato/solids.jpg" usemap="#plato" alt="platonic solids" />
<map id="plato" name="plato" class="floatbox" data-fb-options="group:solids colorTheme:custom padding:14 panelPadding:5 enableDragResize:true draggerLocation:content cornerRadius:8 showNavOverlay:never infoText:`Animate...` infoOptions:`modal:false boxLeft:-70% padding:0 innerBorder:0 panelPadding:4 roundCorners:none controlsPos:tr outerBorder:0 shadowType:hybrid shadowSize:8 doAnimations:false colorTheme:red`">
<area data-fb-options="group:null" shape="rect" coords="6,7,51,32" href="//en.wikipedia.org/wiki/Platonic_solid" alt="wikipedia - platonic solid" />
<area shape="poly" coords="60,12,103,6,89,48" href="images/plato/tetrahedron.png" data-fb-options="info:images/plato/tetrahedron.gif" title="tetrahedron" alt="tetrahedron" />
<area shape="poly" coords="124,6,148,15,153,29,139,47,112,39,114,25" href="images/plato/hexahedron.png" data-fb-options="info:images/plato/hexahedron.gif" title="hexahedron" alt="hexahedron" />
etc...
</map>

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',
  altContent: '<a href="images/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('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 showClose:false showOuterClose:true">Show me the way!</a>

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">
  <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?colorTheme=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.