Multibox Integration in Blogger Template

I already tried adding lightbox 2.04 in a blogger and it works perfect to my blog. Now i tried another type of lightbox and it is called multibox created by phatfusion and the latest version now is multibox version 1.3.1. This lightbox supports images, flash, video, mp3s, html.

1. Login into Blogger account, go to Layout –> Edit HTML. Then edit your blogger template and add the code below between your header tag (<head>.. </head>)

See images below:

Put the tag below before your </body> tag :

<div class="code-box">
&lt;script type="text/javascript"&gt;  			
var box = {};  			
window.addEvent('domready', function(){box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true}); });  		
&lt;/script&gt;
</div>
<strong>See images below:</strong>
<a  rel="lightbox[multibox]" href="http://www.virtuosomaster.com/tutorials/wp-content/uploads/2008/10/multibox-body.jpg"><img src="http://www.virtuosomaster.com/tutorials/wp-content/uploads/2008/10/multibox-body-300x185.jpg" alt="" title="multibox-body" width="300" height="185" class="alignnone size-medium wp-image-400" /></a>

3. Create a post and upload images using the Blogger.com WYSWYG editor.
5. Once you have uploaded the image you will see an entry similar shown in the figure below.

6. Replace the highlighted code with:

id="mb1" class="mb" title="Image Title 1 (jpg)"

After you add the multibox code you will need to remove the “-h” ‘s as this opens the picture in a new window. See my example below:

Remove “-h” to look your anchor code like this:

here is the final code:

<a id="mb1" class="mb" title="Image Title 3 (jpg)" href="http://1.bp.blogspot.com/_mDM92GYgCuk/SPYLLVbnFbI/AAAAAAAAAC4/qgLVD2jrksU/s1600/1_959969982-finall.jpg">
<img src="http://1.bp.blogspot.com/_mDM92GYgCuk/SPYLLVbnFbI/AAAAAAAAAC4/qgLVD2jrksU/s320/1_959969982-finall.jpg" alt="" /></a>
<div style="display: none;" class="multiBoxDesc mb1">This is my descrition text 1. It can support html.</div>

…remember to change ID for each image link using a progressive number (mb1, mb2, mb3…) and the relative multiBoxDesc reference (in bold in the code above!).

8.Publish your work .

Visit my photoblog to see the multibox version 1.3.1 in action and more usages: Multibox in Blogger
You can download my blogger template here: Download
If you like to customize your lightbox download your multibox version 1.3.1. here and upload to your host.

The post Multibox Integration in Blogger Template appeared first on WP Task Force Your One-stop Wordpress Solution - Outsource Wordpress Developer & Designer.