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
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
Hi,
I was trying to incorporate into my blog but it does’nt let me change the template when I insert the Multibox code in the body tag. It seems you also use a different one in your template. can you explain please?
Jan
Comment by Jan — March 15, 2009 @ 9:08 am
hey can you make a tutorial for integrating mediabox in blogger, please?
Comment by me — March 16, 2009 @ 5:39 pm
gofree check out:
http://www.phatfusion.net/multibox/
Comment by Mik — August 9, 2009 @ 12:55 am
hi
thanx
but u should actuallt replace the double quotes
coz in blogger , u’ll get this error :
(Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.)
so , replace the double quote , with a single one like this ‘
thnx again
Comment by wael — January 3, 2010 @ 10:57 am
I keep getting this error message.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.
Comment by Raul — January 13, 2010 @ 5:46 pm