Implementing ImageBox in Blogger

Imagebox a jQuery equivalent for Lightbox2. Alternative to image popups that will display images in an overlay. All links that have attribute 'rel' starting with 'imagebox' and link to an image will display the image inside the page.

Galleries can by build buy giving the value 'imagebox-galname' to attribute 'rel'. Attribute 'title' will be used as caption.

Keyboard navigation:

Next image: arrow right, page down, 'n' key, space
Previous image: arrow left, page up, 'p' key, backspace
Close: escape

             

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 language="javascript" src="http://dl.dropbox.com/u/27675057/Imagebox/jquery.js" type="text/javascript">
</script>
<script language="javascript" src="http://dl.dropbox.com/u/27675057/Imagebox/interface%20%281%29.js" type="text/javascript">
</script>
<link charset="utf-8" href="http://dl.dropbox.com/u/27675057/Imagebox/imagebox.css" media="screen" rel="stylesheet" title="prettyPhoto main stylesheet" type="text/css"></link>

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

<script type="text/javascript">
 
$(document).ready(
 function()
 {
  $.ImageBox.init(
   {
    loaderSRC: 'http://saibaba.googlecode.com/files/loading.gif',
    closeHTML: '<img src="http://saibaba.googlecode.com/files/close.jpg" />'
   }
  );
 }
);
</script>

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

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

<script language="javascript" src="http://dl.dropbox.com/u/27675057/Imagebox/jquery.js" type="text/javascript">
</script>
<script language="javascript" src="http://dl.dropbox.com/u/27675057/Imagebox/interface%20%281%29.js" type="text/javascript">
</script>
<link charset="utf-8" href="http://dl.dropbox.com/u/27675057/Imagebox/imagebox.css" media="screen" rel="stylesheet" title="prettyPhoto main stylesheet" type="text/css"></link>  
<script type="text/javascript">
 
$(document).ready(
 function()
 {
  $.ImageBox.init(
   {
    loaderSRC: 'http://saibaba.googlecode.com/files/loading.gif',
    closeHTML: '<img src="http://saibaba.googlecode.com/files/close.jpg" />'
   }
  );
 }
);
</script>

4.Now for adding the images into ImageBox, 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=" " rel="imagebox" ><img src=" " /></a>

As you can see we added only a rel="imagebox".

For making a Gallery add the following code after the above code

<a href=" " rel="imagebox-g1" ><img src=" " /></a>

      <a href=" " rel="imagebox-g1" ><img src=" " /></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 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.