Implementing Quickbox in Blogger

QuickBox is a Lightbox clone written for the MooTools Javascript framework.It was written from the ground up for version 1.2 of the lightweight MooTools framework.

QuickBox was written for speed, allowing you to zip through images as quickly as possible. One improvement made to facilitate this is allowing use of the mouse wheel to scroll through images.

Also changed are a more stable background, captions that can be localized for other languages, and a few other minor improvements.

             

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.

<link href="http://dl.dropbox.com/u/27675057/QuickBox/css/quickbox.css" rel="stylesheet" type="text/css"></link>

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

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/QuickBox/src/mootools-1.2-more.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/QuickBox/src/QuickBox.js" type="text/javascript">
</script> 
<script type="text/javascript">
new QuickBox();
</script>

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

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

<link href="http://dl.dropbox.com/u/27675057/QuickBox/css/quickbox.css" rel="stylesheet" type="text/css"></link>

Now put the links of all the images with rel="quickbox" and then put this piece of code(This is very important, make sure that you put the images first before putting this code).

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/QuickBox/src/mootools-1.2-more.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/QuickBox/src/QuickBox.js" type="text/javascript">
</script> 
<script type="text/javascript">
new QuickBox();
</script>

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

As you see we only added a rel="quickbox"

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