Implementing tinylightBox in Blogger

tinyLightbox is a lightweight gallery viewer like original lightbox with slideshow. It can be extended with any other animations and has a lot of settings.

tinyLightbox is based on Jquery framework and also provides two different animations namely "parallel" and "original".

             

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 href="http://dl.dropbox.com/u/27675057/Tinylightbox/css/jquery.tiny-lightbox.css" media="screen" rel="stylesheet" type="text/css"></link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/Tinylightbox/js/jquery.bgiframe.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/Tinylightbox/js/jquery.tinyLightbox.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/Tinylightbox/js/jquery.tinyLightbox.original.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/Tinylightbox/js/jquery.tinyLightbox.parallel.js" type="text/javascript">
</script> 

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

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

<link href="http://dl.dropbox.com/u/27675057/Tinylightbox/css/jquery.tiny-lightbox.css" media="screen" rel="stylesheet" type="text/css"></link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/Tinylightbox/js/jquery.bgiframe.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/Tinylightbox/js/jquery.tinyLightbox.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/Tinylightbox/js/jquery.tinyLightbox.original.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/Tinylightbox/js/jquery.tinyLightbox.parallel.js" type="text/javascript">
</script> 

4.Now for adding the images into tinylightBox ,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 

<div id="original"> <a href="large3.jpg"><img src="small3.jpg" /></a> </div>

As you see we only wrapped it in div tag with id "original".Now original is the type of animation ,you can also replace it with "parallel"(which is another animation).Now add the following javascript snippet to link it to script.

<script type="text/javascript">
 $('#original').tinyLightbox();
</script> 

Here is a customized javascript for calling the lightbox using the parallel animation

<script type="text/javascript">
 $('#parallel').tinyLightbox({animation: 'parallel', speed: 400});
</script> 

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.