Implementing Orangebox in Blogger

OrangeBox is made to be simple. The javascript is just 16KB but has powerful features. It supports common image file types, QuickTime movies, SWF files, inline content, iFrames, and Vimeo & YouTube video streaming as well as item groups with navigation, hidden item groups, keyboard navigation, and image preloading.There is also a added functionality for sharing each element using AddThis widget.

             

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 rel="stylesheet" href="http://dl.dropbox.com/u/27675057/orangebox/css/orangebox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://orangebox.davidpaulhamilton.net/styles.css" type="text/css" media="screen" /> 
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/orangebox/js/orangebox.js"></script>

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

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

<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/orangebox/css/orangebox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://orangebox.davidpaulhamilton.net/styles.css" type="text/css" media="screen" /> 
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/orangebox/js/orangebox.js"></script>

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

Make it like this 

<a data-ob_caption="This is the caption" data-ob_linkText="CubaGallery"  rel="lightbox" href="large3.jpg"><img  src="small3.jpg" /></a>

As you see we only added a rel tag "lightbox". The "data-ob_caption" is for giving small description of the lightboxed elements which appears on hovering over it. The "data-ob_linkText" is for giving the title to the Element.


Now to add Galleries just see the replace rel="lightbox" with rel"lightbox[GroupName]" where GroupName is the name of the specific gallery.

To add any element including iFrame, SWF,Youtube,Vimeo,etc just add rel="lightbox" into it.


Update:There is a minor bug in this plugin that if you try to make a gallery only containing Videos in it then none of the members of that group are loaded in the overlay window.


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.