Implementing jsImagebox in Blogger

jsImageBox is a compact and easy to connect a script that allows you to display enlarged image in a popup box. Script code is only 9kb. For his work on the page you want to connect only a single js file. The script is written without using third-party frameworks and libraries, so that should not cause conflicts when connecting to sites that have already made ​​with the use of any framework.

             

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/JsImgbox/jsibox_basic.js" type="text/javascript">
</script>

2.Go to the Post/Page you want to add jsImagebox 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/JsImgbox/jsibox_basic.js" type="text/javascript">
</script>

4.Now for adding the images into jsImagebox ,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="1.jpg" title="Hello Title"><img src="1_1.jpg"/></a>


Make it like this

<a href="1.jpg" onclick="return jsiBoxOpen(this)" rel="rr" title="Hello Title"><img  src="1_1.jpg" /></a>

As you see we only added a rel="rr" tag and a onclick="return jsiBoxOpen(this)" 


jsImagebox automatically detects galleries.





5.Now save the Post/Page.




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.