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




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

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

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

Post a Comment
Bhavna said...

i like this post and application...Recently i removed all the major application from my blog home page as it was consuming lots of energy and space of my blog...what do you think of these applications ? I have bookmarked your blog for future use , you are the right person to help me with such issues thanks a ton and I am happy I can comment now on your blog, thanks

@Bhavna
Hi Bhavna,thanks for the thumbs Up.
Firstly about the applicaitons, the lesser you have the better.

See it is really up to you to decide whether a certain app is right for your blog or not but choose wisely because for blog or website to be successful it should be fast loading.

Until your blog doesn't slow down gravely every app is fine

But lastly ,before including any app Just ask yourself a Question.. Whether it is a Necessity or a Luxury ?

alex tuter said...

dsd