Implementing iBox in Blogger

iBox is a lightweight script that lets you overlay images and documents in a small dialog without a page reload. It's built to be easy to install and use.

iBox easily supports the standard overlay of images, in many sizes, and will automatically scale down the window if the browser's viewpane is too small.

             

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/iBox/ibox.js" type="text/javascript">
</script> 
<link href="http://dl.dropbox.com/u/27675057/iBox/ibox.css" media="screen" rel="stylesheet" type="text/css"></link> 

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

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

<script src="http://dl.dropbox.com/u/27675057/iBox/ibox.js" type="text/javascript">
</script> 
<link href="http://dl.dropbox.com/u/27675057/iBox/ibox.css" media="screen" rel="stylesheet" type="text/css"></link>

4.Now for adding the images into iBox ,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="large3.jpg"><img border="0" height="90" src="/small3.jpg" width="120" /></a>

Make it like this 

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

As you see we only addeda rel="ibox"




Some Example Code:

Single
<a href="http://www.enthropia.com/labs/ibox/images/large/image_1b.jpg" rel="ibox" title="Good Barbeque at 1024x450!"><img alt="" src="http://www.enthropia.com/labs/ibox/images/small/image_1.jpg" /></a>

Ajax
<a href="http://www.enthropia.com/labs/ibox/ibox-ajax-test.html" rel="ibox" title="Loading External HTML File using AJAX" >ibox-ajax-test.html</a>


Inline
<a href="#inner_content" rel="ibox" title="Loading Internal HTML Content" >#inner_content</a> 
<div id="inner_content" style="display:none;">
<div style="background:#000000;color:#ffffff;border:1px dashed #FFFFFF;padding:15px;margin:15px;">
 
<h2>
It is a hidden div!</h2>
<p>
If you were to view source, you would find a div called 'inner_content'. This is that div. We have used CSS to set its display property to none, but using <a href="http://www.enthropia.com/blog/p_ibox.html">iBox</a>, you can clearly see it as an overlay. Hurrah!</p>
<p>
It is even styled. Oh so pretty it is</p>
</div>
</div>


Youtube
<a href="http://www.youtube.com/watch?v=Sr2JneittqQ" rel="ibox">My YouTube Video</a>


PHP
<a href="login.php" rel="ibox&amp;width=275" target="ibox-login.html" title="Login">Login Form</a>

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 Loader.gif is 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