Implementing Clearbox in Blogger

Clearbox is a lightbox script based on the jQuery framework. It is capable of displaying image galleries, Flash, Quicktime, Windows Media formats, HTML, inner content, etc.One of its Plus point is that it works BEFORE the page is fully loaded! It is even capable of Rotating the images (not working in Internet Explorer or some other older browsers).It can effectively scale down large images with no comprise in quality and also features a Download button (For Images,MOV,other Media Fromats) as well as a Play button (For Slideshow).



Note: This tutorial requires that you either have a free Dropbox account or some other file hosting which provides a Folder options.

             

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

In this JS file you will have to change the path of CB_ScriptDir variable (its on the top) to the one pointing to the Clearbox Folder (This is where Dropbox comes into the picture).

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

In this JS file you will have to change the path of CB_ScriptDir variable (its on the top) to the one pointing to the Clearbox Folder (This is where Dropbox comes into the picture).

4.Now for adding the images into Clearbox ,Firstly add the image normally using Insert Image Button





Now When you see the codein the edit HTML window it would be something like this

<a title="1 tes" href="large3.jpg"><img src="small3.jpg" /></a>

Make it like this 

<a rel="clearbox" href="large3.jpg"><img src="small3.jpg" /></a>

As you see we only added rel tag namely "clearbox". 





Now to add Galleries just see the following code:

<a href="2.png" rel="clearbox[gallery=My Gallery]"><img src="D.png" /></a>
<a href="9.jpg" rel="clearbox[gallery=My Gallery]"><img src="5D.jpg" /></a>
<a href="29.jpg" rel="clearbox[gallery=My Gallery]"><img src="7D.jpg"/></a>

As you see we only added rel="clearbox[gallery=My Gallery]" where My Gallery is the name of the Gallery





Now Some Working Example Code:

Divs
<a href="inner#test" rel="clearbox[tnhrf=nopreview,,title=Inner content,,comment=Alike, but not similar to the previous example!]">Inner DIV</a> 

Swf
<a href="http://www.clearbox.hu/test.swf" rel="clearbox[tnhrf=nopreview,,width=600,,height=400,,title=Flash content]">SWF</a> 

YouTube
<a href="http://www.youtube.com/v/OtQN-iDfprU" rel="clearbox[tnhrf=nopreview,,width=700,,height=490,,title=A clearbox 3 preview movie on YouTube,,comment=I uploaded some movies to YouTube from clearbox 3...]">Youtube</a> 

MOV
<a href="http://handras.hu/insight/media/insight_960.mov" rel="clearbox[tnhrf=nopreview,,title=iNSIGHT (http://handras.hu/insight),,comment=This joy of creation through behind-the-scenes pictures.&lt;br /&gt;&lt;font color=&quot;#ff7700&quot;&gt;QuickTime plugin required!&lt;/font&gt;,,width=960,,height=540]">Quicktime</a> 

MP3
<a href="http://www.clearbox.hu/test.mp3" rel="clearbox[tnhrf=nopreview,,width=500,,height=150,,title=MP3 music,,comment=Windows Media Player plugin is required!]">MP3</a>

Firstly the format is a little different ,you have to get with it.

Secondly the comment in the code represents the Text which is shown below the item

Thirdly to call divs you have to include "inner" in the address before #

If you can't understand something else please feel free to ask



Now I tried whether Clearbox could open itself in itself(Inspection style).Now there are no official way to do this ,but normally if you iFrame it to a page containing Clearbox then it can Function,In my case I redirected it to my Demo page,See the result for yourself

(Level Three is not Possible)







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.



Thanks to Charlotte for pointing out how to remove the popup messages that appear telling "Clearbox is ready" and stuff.

To disable it go to /clearbox/config/default/cb_config.js

The new code has to be this with "OFF" :
CB_OSD='off', // turns on OSD
CB_OSDShowReady='off', // when clearbox is loaded and ready, it shows an OSD message

             

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox