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>)
<link href="http://www.virtuosomaster.com/tutorials/samples/MultiBox/multibox/multibox.css" rel="stylesheet" type="text/css"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/MultiBox/multibox/js/mootools.js" type="text/javascript"></script>
<script src="http://www.virtuosomaster.com/tutorials/samples/MultiBox/multibox/js/overlay.js" type="text/javascript"></script>
<script src="http://www.virtuosomaster.com/tutorials/samples/MultiBox/multibox/js/multibox.js" type="text/javascript"></script>
See images below:
Put the tag below before your </body> tag :
var box = {};
window.addEvent(’domready’, function(){box = new MultiBox(’mb’, {descClassName: ‘multiBoxDesc’, useOverlay: true}); });
</script>
See images below:
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:
<a id="mb1" class="mb" title="Image Title 3 (jpg)" href="http://1.bp.blogspot.com/../../qgLVD2jrksU/s1600-h/1_959969982-finall.jpg">
Remove “-h” to look your anchor code like this:
<a id="mb1" class="mb" title="Image Title 3 (jpg)" href="http://1.bp.blogspot.com/../../qgLVD2jrksU/s1600/1_959969982-finall.jpg">
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.
Related Topic:
Lightbox v2.04 Integration with Blogger Template
Ratings:
(2 votes, average: 3 out of 5)
Loading ...Posted in:
Blogger, Javascript, Lightbox, Website Addons — admin| 
| 
|
very useful info
thanks dude
Comment by haddie — November 4, 2008 @ 12:46 am
Dude, Thanks so much.
Comment by Mel — December 10, 2008 @ 2:27 pm
I got to your demo site, but only pictures tested. Can you also demo us the flash, mp3, video things that this script supports?
Thanks a lot for your hard work and great guide.
Comment by gofree — January 22, 2009 @ 11:41 pm
gofree check out:
http://www.phatfusion.net/multibox/
Comment by Mik — August 9, 2009 @ 12:55 am