Implementing Litebox in Blogger

Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.






             

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. 

<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/LiteBox/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/LiteBox/style.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/LiteBox/prototype.lite.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/LiteBox/moo.fx.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/LiteBox/litebox-1.0.js"></script>



Now at the place of use make sure that All the calls to Litebox should be made within the body tag after the  onload="initLightbox() has been declared
<body onload="initLightbox()">
.
.
.
.
</body>

2.Go to the Post/Page you want to add the Litebox and 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/LiteBox/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/LiteBox/style.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/LiteBox/prototype.lite.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/LiteBox/moo.fx.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/LiteBox/litebox-1.0.js"></script>
<body onload="initLightbox()">
.
.
.
.
</body>


All the calls to Litebox should be made within the body tag after the  onload="initLightbox() has been declared.



4.Now for adding the images into Litebox ,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=" " rel="litebox" ><img src=" " /></a>

As you can see we added only a rel="litebox".

For adding Gallery the code is 

<a href=" " rel="litebox[example]" ><img src=" " /></a>
<a href=" " rel="litebox[example]" ><img src=" " /></a>

In the above the example can be changed by any name of your choice


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.
             

0 comments:

Post a Comment

 
© 2009 Blogger Tips 2013 | Powered by Blogger