Implementing ImgBox in Blogger

ImgBox is a very simple to use and small Lightbox based on Jquery.

Some of its features are:

Elegant looking, Mac-like effect
Popup blockers are no problem. The content opens within the active browser window
Multiple images can be opened at the same time
Can be customized with settings and CSS
It’s just 7KB (packed)
All modern browsers supported, including IE6

             

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://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/ImgBox/jquery.imgbox.js" type="text/javascript">
</script> 
<style type="text/css">
@import url(http://dl.dropbox.com/u/27675057/ImgBox/imgbox.css);
</style>

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/ImgBox/jquery.imgbox.js" type="text/javascript">
</script> 
<style type="text/css">
@import url(http://dl.dropbox.com/u/27675057/ImgBox/imgbox.css);
</style>

4.Now for adding the images into ImgBox ,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  src="/small3.jpg"  /></a>

Make it like this

<a href=" " id="name" ><img src=" " /></a>

As you can see we added only a id="Name".

Follow this by  a snippet

<script type="text/javascript">

  $(document).ready(function() {

   $("#name").imgbox();

});

</script>

This is the easiest way to integrate Imgbox but there are some options available to alter the speed ,add overlay ,etc.Here is a sample code 

<script type="text/javascript">

$("#name").imgbox({

    'speedIn'  : 600,

    'speedOut'  : 500,

    'alignment'  : 'center',

    'overlayShow' : true,

    'allowMultiple' : false

   });

  });

</script> 

The 'name' in blue is changeable but make sure that you change it everywhere

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.