Implementing Divbox in Blogger

DivBox is simple, easy style format, no need extra markup and is used to overlay elements on the current page through the power and flexibility of jQuery´s selector. DivBox is a plugin for jQuery

It can overlay mp3, flv, mov, swf, wmv, Youtube Videos, mp4, iFrames, Ajax Content to name a few.

             

Steps to Add it to Blogger:

1.Login to the Blogger account.

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

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

<script src="http://dl.dropbox.com/u/27675057/DivBox/jquery-1.3.2.min.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/DivBox/divbox.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/DivBox/divbox.css" media="screen" rel="stylesheet" type="text/css"></link>

2.Go to the Post/Page you want to add the Divbox and go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<script src="http://dl.dropbox.com/u/27675057/DivBox/jquery-1.3.2.min.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/DivBox/divbox.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/DivBox/divbox.css" media="screen" rel="stylesheet" type="text/css"></link>

4.Now for adding the images into DivBox, Firstly add the image normally using Insert Image button


Now When you see the code in the edit HTMLwindow it would be something like this

<a href=" large3.jpg"=""><img border="0" height="90" src="/small3.jpg" width="120" /></a>

Make it like this

<a href=" " class="divbox" ><img src=" " /></a>

As you can see we added only a class="Divbox".

Then you also have to add this piece of code

<script type="text/javascript">
var opt = {
caption: true,
caption_control: true 
}
$('a.divbox').divbox(opt);
</script>

For making a gallery add the following code 

<a href=" " rel="lightbox1" ><img src=" " /></a>

      <a href=" " rel="lightbox1" ><img src=" " /></a>

Then add the following code after it

<script type="text/javascript">
 
    $('a.lightbox1').divbox();
    
</script> 

Some Example Code

Single Image
<a class="divbox" href="http://dl.dropbox.com/u/27675057/1%282%29.jpg"><img alt="" height="72" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="72" /></a>

<script type="text/javascript">
var opt = {
caption: true,
caption_control: true 
}
$('a.divbox').divbox(opt);
</script>

Gallery
<a class="lightbox1" href="http://dl.dropbox.com/u/27675057/DivBox/image2.jpg" title="Title 2"><img src="http://dl.dropbox.com/u/27675057/DivBox/thumb_image2.jpg" /></a>&nbsp;&nbsp;<a class="lightbox1" href="http://dl.dropbox.com/u/27675057/DivBox/image3.jpg" title="Title 3"><img src="http://dl.dropbox.com/u/27675057/DivBox/thumb_image3.jpg" /></a>&nbsp;&nbsp;<a class="lightbox1" href="http://dl.dropbox.com/u/27675057/DivBox/image4.jpg" title="Title 4"><img src="http://dl.dropbox.com/u/27675057/DivBox/thumb_image4.jpg" /></a>&nbsp;&nbsp;<a class="lightbox1" href="http://dl.dropbox.com/u/27675057/DivBox/image5.jpg" title="Title 5"><img src="http://dl.dropbox.com/u/27675057/DivBox/thumb_image5.jpg" /></a>
<script type="text/javascript">
 
    $('a.lightbox1').divbox();
    
</script> 

HTML Description
<a class="lightbox3" href="http://dl.dropbox.com/u/27675057/DivBox/image5.jpg" rel="descript_1" title="Title 1"><img src="http://dl.dropbox.com/u/27675057/DivBox/thumb_image5.jpg" /></a> 
<div id="descript_1" style="display: none;">
HTML <em>Description</em> 2</div>
<script type="text/javascript">
 
 
    var opt = {
     caption: function(obj){
      return $('#' $(obj).attr('rel')).html();
     }
    }
    $('a.lightbox3').divbox(opt);
    
</script>

Media types
<a class="lightbox" href="http://dl.dropbox.com/u/27675057/DivBox/video.flv">flv example</a>

<a class="lightbox" href="http://dl.dropbox.com/u/27675057/DivBox/music.mp3">mp3 example</a>

<a class="lightbox" href="http://dl.dropbox.com/u/27675057/DivBox/video.mp4">mp4 example</a>

<a class="lightbox" href="http://dl.dropbox.com/u/27675057/DivBox/media.wmv">wmv example</a>

<a class="lightbox" href="http://dl.dropbox.com/u/27675057/DivBox/flash.swf">swf example</a>

<a class="lightbox" href="http://www.youtube.com/watch?v=o8ccSiH4olo">Youtube video</a> 
<div style="float: left; width: 300px;">

More...

<a class="lightbox" href="http://google.com/">External link(Iframe)</a>

<a class="popup" href="http://www.blogger.com/page-edit.do?blogID=7521351820124661054&amp;pageID=8396825988448204402#" rel="box_id">HTML Element</a>

</div>
<div id="box_id" style="display: none;">
<ul>
<li>Here the text</li>
<li>Here the text</li>
<li>Here the text</li>
<li>Here the text</li>
<li>Here the text</li>
</ul>
</div>

<script type="text/javascript">
 
    $('.lightbox').divbox({caption: false});
    $('.popup').divbox({type: 'element',caption: false});
    
     
</script> 

5.Now save the Post/Page and see the magic.

Note: Please 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.