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 ]]></b:skin> tag and paste the following code just Above/Before it.
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&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>
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.
Find me on