Implementing LyteBox in Blogger

Lytebox was written from the Lightbox class that Lokesh Dhakar originally wrote. The purpose was to write a self-contained object that eliminated the dependency of prototype.js, effects.js, and scriptaculous.js. Since the original version of Lytebox (which released with iFrame support), major modifications have been made to improve performance as well as "Slideshow" support, "Themes" support, HTML content support (as opposed to just images) and many more configurable options that allow you to customize the look and feel of Lytebox.

             

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. 

1	<script type="text/javascript" language="javascript" src="http://dl.dropbox.com/u/27675057/lytebox_v3.22/lytebox.js"></script>

2	<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/lytebox_v3.22/lytebox.css" type="text/css" media="screen" />

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

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

<script type="text/javascript" language="javascript" src="http://dl.dropbox.com/u/27675057/lytebox_v3.22/lytebox.js"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/lytebox_v3.22/lytebox.css" type="text/css" media="screen" />

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


Now When you see the code in the edit HTMLwindow 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 href="large3.jpg"><img border="0" height="90" rel="lytebox" src="/small3.jpg" width="120" /></a>

As you see we only added a rel tag "lytebox"


Similarly if you want to add galleries then each element of the gallery should have have this kind of a rel tag:

rel="lytebox[Gallery Name]"

For Slideshow:                          

rel="lyteshow[Gallery Name]"

 For iFrames:  

rel="lyteframe"

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 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.