Implementing Floatbox in Blogger

Floatbox is a javascript library for displaying windowed content over top of web pages. In addition to excellent 'lightbox clone' capabilities, Floatbox includes the ability to show cycling image sets, enhanced tooltips and popup thumbnails. All content types are supported and there is an extensive and reliable API and suite of library functions included which make Floatbox the tool of choice for building smart interactive content. Floatbox is highly customizable, easy to deploy, and very robust and reliable across all modern browsers.Floatbox strives to be the best-of-breed with features and capabilities web-site designers need to build quality 3-dimensional sites and services.





             

Steps to Add it to Blogger:





1.Login to the Blogger account.


2. Now Go to Design > Edit HTML.


3.Now search for the </head> tag and paste the following code just Above/Before it.

<link href="http://dl.dropbox.com/u/27675057/floatbox/floatbox.css" rel="stylesheet" type="text/css"></link> 
<script src="http://dl.dropbox.com/u/27675057/floatbox/floatbox.js" type="text/javascript">
</script>

2.Go to the Post/Page you want to add the Floatbox and go to Edit HTML tab .


3.Now copy the code from below and paste it there.



<link href="http://dl.dropbox.com/u/27675057/floatbox/floatbox.css" rel="stylesheet" type="text/css"></link> 
<script src="http://dl.dropbox.com/u/27675057/floatbox/floatbox.js" type="text/javascript">
</script>



4.Now for adding the images into FloatBox, Firstly add the image normally using Insert Image button


Now When you see the code in the edit HTMLwindow it would be something like this




<a href=" large3.jpg"=""><img border="0" height="90" src="/small3.jpg" width="120" /></a>


Make it like this




<a href=" " class="floatbox" data-fb-options="group:pix1" ><img src=" " /></a>

As you can see we added only a class="floatbox" and a 'data-fb-options' tag

For adding a Gallery 

<a href=" " class="floatbox" data-fb-options="group:pix" ><img src=" " /></a>
<a href=" " class="floatbox" data-fb-options="group:pix" ><img src=" " /></a>

Make sure that the group of the elements of the Gallery should be the same

The amount  of Options available in this plugin are really too many ,Please refer this Page for further Reference.


Even the types of data this small plugin supports is mind blowing 


Some of the Example Code 

<b>Images</b>

Single 
<a class="floatbox" data-fb-options="group:pix1" href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" title="Speed"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="90" /></a> 


Gallery
<a class="floatbox" data-fb-options="group:pix " href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" title="Speed"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix caption2:`Need For Speed`" href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" title="Speeding"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix " href="http://dl.dropbox.com/u/27675057/2.png" title="Hot Pursuit"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" width="90" /></a> 

Thumbnail Gallery
<a class="floatbox" data-fb-options="group:pix2 numIndexLinks:-1" href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" title="Speed"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix2 numIndexLinks:-1 caption2:`Need For Speed`" href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" title="Speeding"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix2 numIndexLinks:-1" href="http://dl.dropbox.com/u/27675057/2.png" title="Hot Pursuit"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" width="90" /></a> 

Slideshow
<a class="floatbox" data-fb-options="group:pix3 doSlideshow:true  navType:button" href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" title="Speed"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix3 doSlideshow:true  navType:button caption2:`Need For Speed`" href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" title="Speeding"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix3 doSlideshow:true  navType:button" href="http://dl.dropbox.com/u/27675057/2.png" title="Hot Pursuit"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" width="90" /></a> 

APOD Slideshow
<a class="floatbox" data-fb-options="group:pix4 colorTheme: 'custom',
        splitResize: 'auto',
        resizeDuration: 4,
        imageFadeDuration: 4,
        overlayFadeDuration: 7,
        overlayOpacity: 100,
        navType: 'button',
        roundCorners: 'none',
        shadowSize: 8,
        outerBorder: 3,
        innerBorder: 2,
        enableDragResize: false,
        preloadAll: false,
        loadPageOnClose: 'back',
        doSlideshow: true,
        slideInterval: 3,
        randomOrder: true,
        framed: true,
        enableQueryStringOptions: true" href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" title="Speed"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix4 caption2:`Need For Speed`colorTheme: 'custom',
        splitResize: 'auto',
        resizeDuration: 4,
        imageFadeDuration: 4,
        overlayFadeDuration: 7,
        overlayOpacity: 100,
        navType: 'button',
        roundCorners: 'none',
        shadowSize: 8,
        outerBorder: 3,
        innerBorder: 2,
        enableDragResize: false,
        preloadAll: false,
        loadPageOnClose: 'back',
        doSlideshow: true,
        slideInterval: 3,
        randomOrder: true,
        framed: true,
        enableQueryStringOptions: true" href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" title="Speeding"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" width="90" /></a> <a class="floatbox" data-fb-options="group:pix4 colorTheme: 'custom',
        splitResize: 'auto',
        resizeDuration: 4,
        imageFadeDuration: 4,
        overlayFadeDuration: 7,
        overlayOpacity: 100,
        navType: 'button',
        roundCorners: 'none',
        shadowSize: 8,
        outerBorder: 3,
        innerBorder: 2,
        enableDragResize: false,
        preloadAll: false,
        loadPageOnClose: 'back',
        doSlideshow: true,
        slideInterval: 3,
        randomOrder: true,
        framed: true,
        enableQueryStringOptions: true" href="http://dl.dropbox.com/u/27675057/2.png" title="Hot Pursuit"><img alt="" height="67" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" width="90" /></a>



<b>HTML Content</b>

iFrame
<a class="floatbox" data-fb-options="width:650 height:92% splitResize:auto disableScroll:true showNewWindow:true showPrint:true mobileNewWindow:true enableDragResize:true" href="http://dl.dropbox.com/u/27675057/viewdocs.htm">Floatbox Instructions</a>

AJAX Content
<a class="floatbox" data-fb-options="type:ajax width:500 caption:`AJAX Content`" href="http://dl.dropbox.com/u/27675057/ajax1.htm">AJAX Content</a>

Inline DIV Content
<a class="floatbox" href="http://www.blogger.com/post-edit.g?blogID=7521351820124661054&amp;postID=796114881949317387#inline" title="Inline DIV">Inline DIV Content</a>
<div id="inline" style="color: black; display: none; width: 450px;">
<div style="padding: 0px 18px;">
This content is loaded from a hidden DIV on the host page.
Links inside hidden DIV content have the same behaviour as described for AJAX content.
See the <a class="floatbox" data-fb-options="type:ajax width:500 scrolling:no caption:`AJAX Content`" href="http://dl.dropbox.com/u/27675057/ajax1.htm?">AJAX example</a> for details.
</div>
<img alt="Mandelbrot set" height="338" src="http://randomous.com/floatbox/images/mandelbrot.jpg" style="border-width: 0; margin-bottom: -3px; margin: 0; padding: 0;" width="450" /> </div>

IE 6 end-of-life screen
<a href="http://dl.dropbox.com/u/27675057/ie6eol.js" onclick="fb.executeJS('ie6eol.js'); return false;">IE 6 end-of-life screen</a>

E-Mailer Form
<a class="floatbox" data-fb-options="width:345 height:460 scrolling:no caption:`Demo Form` captionPos:tc showClose:false" href="http://dl.dropbox.com/u/27675057/demo_form.htm" title="Demo Form">E-Mailer Form</a>

RSS news reader
<a class="floatbox" data-fb-options="width:420 height:150 enableDragResize:true caption:`RSS News Feed&lt;br /&gt;&lt;span style=&quot;font-size:.8em;&quot;&gt;(click the headlines)&lt;/span&gt;`" href="http://randomous.com/floatbox/newsfeed/">RSS news reader</a>

Nested (Stacked) Floatbox Content
<a class="floatbox" data-fb-options="width:93% height:90%" href="http://dl.dropbox.com/u/27675057/demo%20%281%29.htm">Nested (Stacked) Floatbox Content</a>

<b>Multimedia</b>

<div class="floatbox" data-fb-options="type:video enableDragResize:true outerBorder:0">
<a data-fb-options="width:640 height:390" href="http://www.youtube.com/embed/iNTX55Rpk8w?rel=0&amp;hd=1">YouTube</a>

<a data-fb-options="width:600 height:338" href="http://player.vimeo.com/video/13487624">Vimeo</a>

<a data-fb-options="width:480 height:360" href="http://www.dailymotion.com/embed/video/x2hlmy?theme=none">DailyMotion</a>

<a data-fb-options="width:480 height:384" href="http://randomous.com/floatbox/kermit" title="Once In a Lifetime">Local: flowplayer flv</a></div>

Flash
<a class="floatbox" data-fb-options="width:80% height:61.8%w enableDragResize:true caption:`Tetka (the mouse works)`" href="http://randomous.com/floatbox/tetka.swf?scale=default">Flash (Tetka)</a>

Silverlight
<a href="http://randomous.com/floatbox/clock.xap" class="floatbox" data-fb-options="width:600 height:300 colorTheme:black caption:`Silverlight sample`">Silverlight (Clock)</a>

Quicktime movie
<a href="http://randomous.com/floatbox/quicktime.mov" class="floatbox" data-fb-options="width:480 height:376 caption:`Quicktime Example`">Quicktime movie</a>

Windows Media Video
<a href="http://randomous.com/floatbox/big_slip.wmv" class="floatbox" data-fb-options="width:482 height:336 enableDragResize:true caption:`Windows Media Video`">Windows Media Video</a>

PDF
<a href="http://randomous.com/floatbox/pdf_open_parameters.pdf#page=5&navpanes=0" class="floatbox" data-fb-options="caption:href enableDragResize:true">PDF Document</a>

YouTube HD
<a href="http://www.youtube.com/watch?v=-zvCUmeoHpw&amp;hd=1" class="floatbox" data-fb-options="width:1280 height:745 autoFitMedia:true enableDragResize:true caption:`Asteroid Impact (HD)`">YouTube (Asteroid Impact HD)</a>

YouTube (Lego Antikythera Mechanism)
<a href="http://www.youtube.com/v/RLPVCJjTNgk" class="floatbox data-fb-options="width:640 height:385">YouTube (Lego Antikythera Mechanism)</a>

Vimeo (Where The Hell Is Matt?)
<a href="http://www.vimeo.com/1211060" class="floatbox" data-fb-options="width:800 height:450 enableDragResize:true caption:`www.wherethehellismatt.com`">Vimeo (Where The Hell Is Matt?)</a>

Vimeo (Matt's first)
<a href="http://www.vimeo.com/moogaloop.swf?clip_id=1019038&amp;fullscreen=1" class="floatbox" data-fb-options="width:400 height:302 caption:`www.wherethehellismatt.com`">Vimeo (Matt's first)</a>

Vevo (Jamie Cullum)
<a href="http://www.vevo.com/watch/GBL420300004" class="floatbox" data-fb-options="width:80% height:56%w">Vevo (Jamie Cullum)</a>

Vevo (Sting)
<a href="http://www.vevo.com/VideoPlayer/Embedded?videoId=USIV20500266" class="floatbox" data-fb-options="width:80% height:56%w">Vevo (Sting)</a>

Metacafe (Natural Wonders)
<a href="http://www.metacafe.com/fplayer/947767/natural_wonders.swf" class="floatbox" data-fb-options="caption:`Natural Wonders` height:80%w enableDragResize:true">Metacafe (Natural Wonders)</a>

Dailymotion (Adrian Belew)
<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>

<b>Some Special Features</b>

Image and Thumbnail Cycler
<div class="fbCycler floatbox" data-fb-options="cyclePauseOnHover:true group:utah imageFadeDuration:0 centerNav:true" style="height:112px;">
<a href="http://dl.dropbox.com/u/27675057/floatbox/courthouse.jpg">
<img src="http://dl.dropbox.com/u/27675057/floatbox/courthouse_thm.jpg" alt="" />
<span>the courthouse</span>
</a>
<a href="http://randomous.com/floatbox/images/zion_valley.jpg">
<img src="src="http://randomous.com/floatbox/images/blank.gif" data-fb-src="http://dl.dropbox.com/u/27675057/floatbox/zion_valley_thm.jpg" alt="" />
<span>zion valley</span>
</a>

</div>

Popup Thumbnails
<a class="floatbox fbPopdown" href="http://dl.dropbox.com/u/27675057/floatbox/courthouse.jpg" data-fb-options="caption:`Couthouse`">Popdown<img src="http://dl.dropbox.com/u/27675057/floatbox/courthouse_thm.jpg" width="100" height="75" alt="" /></a>





Info link, Print link, and a Tooltip
<a href="http://dl.dropbox.com/u/27675057/floatbox/courthouse.jpg" class="floatbox" data-fb-options="showPrint:true info:http://randomous.com/floatbox/demo#sample_info infoOptions:`width:400 showPrint:true printCSS:/includes/main.css backgroundColor:#ffffe7` tooltip:#tooltip4 tooltipOptions:`moveWithMouse:true` caption:`Courthouse`"><img src="http://dl.dropbox.com/u/27675057/floatbox/courthouse_thm.jpg" alt="" /></a>
<div id="tooltip4" style="display:none; width:338px;">
<div style="float:left;">
<img src="http://randomous.com/floatbox/images/sailboat.png" width="50" height="40" alt="" style="margin:4px 0 0 4px; border-width:0;" /> 
</div>
<div style="float:right; font-size:12px; margin:8px 0; width:270px;">
Here's the tooltip we added.

Be sure to try out the Info and Print links below.
</div>
</div>

Enhanced Tooltips
<img class="fbTooltip" data-fb-tooltip="source:#tooltip1 attachToHost:true" src="http://randomous.com/floatbox/images/tulip-icon.png" />

<div id="tooltip1" style="display:none; width:300px;">
<div style="float:left;">
<a href="http://randomous.com/floatbox/images/lillies.jpg" class="floatbox"
 data-fb-options="colorTheme:custom controlsPos:tr cornerRadius:12 outerBorder:2"> 
<img src="http://randomous.com/floatbox/images/flower.png" width="80" height="66" alt="" style="margin:4px 0 0 4px; border-width:0;" /> 
</a> This is a static tooltip.
Tooltips can be styled with html/css and all the usual floatbox settings.

The flower is a clickable anchor.
</div>
</div>

Google Maps
<a href="http://randomous.com/floatbox/googleMap" class="floatbox" data-fb-options="width:500 height:500 scrolling:no mobileNewWindow:true controlsPos:tr"> 
<img src="http://randomous.com/floatbox/images/cambodia.png" width="32" height="32" alt="" style="border:none; margin-bottom:-5px;" /> 
&nbsp;Show me the way!</a>

Even this doesn't complete the whole list but I am too exhausted to include the remaining 8-9 demos.If you want to see all the demos visit their Demo Page.




5.Now save the Post/Page and see the magic(Truly this Plugin is really a piece of magic,Hats off to the creator).


If you liked this plugin, then support the developer by buying this plugin

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!


Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.
             


Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Friday, June 10, 2011
Post a Comment

WOW!!! Prayang the lightbox very usefull... it also can use on syntax highlighter...
Thanks for the great lightbox!!! ^_^

April 21, 2012 at 1:03 PM Delete