Implementing Multibox in Blogger



Multibox is a simple jQuery plugin to overlay elements on a page.Its support Images ,Swfs ,Wmvs ,Flvs ,Mp3s ,IFrames ,Html Elements to name a few.Its lightweight and stylish.





See DemoDownload



Steps to Add it to Blogger:



1.Login to the Blogger account



2. Now Go to Design > Edit HTML.

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

<link href="http://dl.dropbox.com/u/27675057/Multibox/multiBox.css" rel="stylesheet" type="text/css"></link>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/mootools-1.2.4-core-yc%20%281%29.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/mootools-1.2.4.4-more-yc.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/overlay.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/multiBox.js" type="text/javascript">  
 </script>  
 <script type="text/javascript">  
 window.addEvent('domready', function(){  
 //call multiBox  
 var initMultiBox = new multiBox({  
 mbClass: '.mb',//class you need to add links that you want to trigger multiBox with (remember and update CSS files)  
 container: $(document.body),//where to inject multiBox  
 descClassName: 'multiBoxDesc',//the class name of the description divs  
 path: './Files/',//path to mp3 and flv players  
 useOverlay: true,//use a semi-transparent background. default: false;  
 maxSize: {w:600, h:400},//max dimensions (width,height) - set to null to disable resizing  
 addDownload: false,//do you want the files to be downloadable?  
 pathToDownloadScript: './Scripts/forceDownload.asp',//if above is true, specify path to download script (classicASP and ASP.NET versions included)  
 addRollover: true,//add rollover fade to each multibox link  
 addOverlayIcon: true,//adds overlay icons to images within multibox links  
 addChain: true,//cycle through all images fading them out then in  
 recalcTop: true,//subtract the height of controls panel from top position  
 addTips: true,//adds MooTools built in 'Tips' class to each element (see: http://mootools.net/docs/Plugins/Tips)  
 autoOpen: 0//to auto open a multiBox element on page load change to (1, 2, or 3 etc)  
 });  
 });  
 </script>

Now search for the ]]></b:skin> tag and paste the following code just Above/Before it.


body{  
  font-family:Arial;  
 }  
 a.home, a:link.home, a:visited.home, a:hover.home, a:active.home,  
 a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{  
  color:#FF6600;  
  font-family:Verdana, Arial, Helvetica, sans-serif;  
  text-decoration:none;  
  float:right;  
  margin:-13px 0 0 0;  
  font-size:10px;  
 }  
 a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{  
  margin:0;  
 }  
 a:hover.home, a:hover.Download{  
 color:#FFA062;  
 }
2. Now Go to the Post/Page you want to add the MultiBox and go to Edit HTML.


And copy the code from below and paste it there

<link href="http://dl.dropbox.com/u/27675057/Multibox/multiBox.css" rel="stylesheet" type="text/css"></link>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/mootools-1.2.4-core-yc%20%281%29.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/mootools-1.2.4.4-more-yc.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/overlay.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/multiBox.js" type="text/javascript">  
 </script>  
 <script type="text/javascript">  
 window.addEvent('domready', function(){  
 //call multiBox  
 var initMultiBox = new multiBox({  
 mbClass: '.mb',//class you need to add links that you want to trigger multiBox with (remember and update CSS files)  
 container: $(document.body),//where to inject multiBox  
 descClassName: 'multiBoxDesc',//the class name of the description divs  
 path: './Files/',//path to mp3 and flv players  
 useOverlay: true,//use a semi-transparent background. default: false;  
 maxSize: {w:600, h:400},//max dimensions (width,height) - set to null to disable resizing  
 addDownload: false,//do you want the files to be downloadable?  
 pathToDownloadScript: './Scripts/forceDownload.asp',//if above is true, specify path to download script (classicASP and ASP.NET versions included)  
 addRollover: true,//add rollover fade to each multibox link  
 addOverlayIcon: true,//adds overlay icons to images within multibox links  
 addChain: true,//cycle through all images fading them out then in  
 recalcTop: true,//subtract the height of controls panel from top position  
 addTips: true,//adds MooTools built in 'Tips' class to each element (see: http://mootools.net/docs/Plugins/Tips)  
 autoOpen: 0//to auto open a multiBox element on page load change to (1, 2, or 3 etc)  
 });  
 });  
 </script>  
 <style type="text/css">  
 body{  
  font-family:Arial;  
 }  
 a.home, a:link.home, a:visited.home, a:hover.home, a:active.home,  
 a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{  
  color:#FF6600;  
  font-family:Verdana, Arial, Helvetica, sans-serif;  
  text-decoration:none;  
  float:right;  
  margin:-13px 0 0 0;  
  font-size:10px;  
 }  
 a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{  
  margin:0;  
 }  
 a:hover.home, a:hover.Download{  
 color:#FFA062;  
 }  
 </style>


3.Now for adding the elements ,for example you have to add image into Multibox ,Firstly add the image normally using  Insert Image button 
Now When you see the code in the edit HTML window it would be something like this 

<a href="large2.jpg"  title="Image 2"><img  src="small2.jpg" title="Image 1" /></a>


Make it like this


<a class="mb" href="large2.jpg" id="mb2" rel="[images],noDesc" title="Image 2"><img src="small2.jpg" title="Image 1" /></a>

As you can see we added only a class="mb" and a id tag. For adding multiple files increase the digit of the ID tag consecutively.

You can also give the Description to the element by applying this piece of code just below the element with its respective ID tag

<div class="multiBoxDesc mb4 mbHidden">
This is my description text 4. It can support html.</div>


Here are some example code for Adding different elements:

SWF
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/parallax.swf" id="mb5" rel="width:700,height:200,[flash]" title="Flash">.swf example</a>
<div class="multiBoxDesc mb5 mbHidden">
.swf example by Sai</div>

MOV
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/curly.mov" id="mb6" rel="width:400,height:310,[video]" title="Movie">.mov example</a>
<div class="multiBoxDesc mb6 mbHidden">
.mov example</div>

WMV
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/curly.wmv" id="mb8" rel="width:400,height:350,[video]" title="Windows Media Video">.wmv example</a>
<div class="multiBoxDesc mb8 mbHidden">
.wmv example</div>

MP3
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/music.mp3" id="mb9" rel="[flash]" title="mp3">.mp3 example</a>
<div class="multiBoxDesc mb9 mbHidden">
.mp3 example</div>

FLV
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/curly.flv" id="mb10" rel="width:400,height:300,[flash]" title="Flash Video">.flv example</a>
<div class="multiBoxDesc mb10 mbHidden">
.flv example</div>

HTML
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/blank.htm" id="mb11" rel="width:400,height:300" title="iFrame">HTML page</a>
<div class="multiBoxDesc mb11 mbHidden">
html</div>


HTML Element
<a class="mb" href="http://www.blogger.com/page-edit.do?blogID=7521351820124661054&amp;pageID=5579707308047961391#htmlElement" id="mb13" rel="type:element" title="HTML element">HTML element</a>
<div class="multiBoxDesc mb13 mbHidden">
html element</div>
<div class="mbHidden" id="htmlElement">
This is a snippet of html.
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</div>

IFRAME
<a class="mb" href="http://www.bbc.co.uk/" id="mb14" rel="width:600,height:400" title="iFrame">bbc.co.uk</a>
<div class="multiBoxDesc mb14 mbHidden">
bbc.co.uk</div>


Note: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.
See DemoDownload




Written by Prayag Verma

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

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