Implementing LightWindow in Blogger

LightWindow is another lightbox based on the Prototype library.It supports Firefox, IE6, IE7, Safari3, Opera  and Netscape.

What are all of the features:

Supports EVERY Media type and renders it appropriatly.
Better Animations!
Create your own custom overlays including transparent patterns!
You can create your own theme including markup/css/animations.
Automatically detects media and source.
A variety of parameters are available to further customize the experience.
Window will fit content fetched! Excludes i-frame content!
The window is perfectly centered on the screen by default or you can set its position!

             

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. 

<style type="text/css">
@import url(http://dl.dropbox.com/u/27675057/LightWindow/lightwindow.css);
</style>

<script src="http://dl.dropbox.com/u/27675057/LightWindow/prototype.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/LightWindow/scriptaculous.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/LightWindow/effects.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/LightWindow/lightwindow.js" type="text/javascript">
</script>

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

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

<style type="text/css">
@import url(http://dl.dropbox.com/u/27675057/LightWindow/lightwindow.css);
</style>

<script src="http://dl.dropbox.com/u/27675057/LightWindow/prototype.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/LightWindow/scriptaculous.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/LightWindow/effects.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/LightWindow/lightwindow.js" type="text/javascript">
</script>

4.Now for adding the images into LightWindow ,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=" " class="lightwindow" ><img src=" " /></a>

As you can see we added only a class="lightwindow".

To Add Gallery ,this is the code 

<a  class="lightwindow" href="2.jpg" rel="Random[Sample Images]" >image #2</a> 

<a  class="lightwindow" href="2.jpg" rel="Random[Sample Images]" >image #2</a> 

Just add a rel tag of the type "Name[Name]".

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.