Implementing TinyBox2 in Blogger

TinyBox2 is the successor of the previously published resource TinyBox which is a standalone JavaScript modal windows library.

The library is lightweight (5kb) and supports images, iframes, HTML and Ajax requests natively.

             

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/TinyBox2/style.css" />
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/TinyBox2/tinybox.js"></script>

2.Go to the Post/Page you want to add TinyBox2 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/TinyBox2/style.css" />
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/TinyBox2/tinybox.js"></script>

4.Now for adding the images into TinyBox2


If images are to be added then this is the code:

<li onclick="TINY.box.show({image:'http://dl.dropbox.com/u/27675057/3%20%282%29.jpg',boxid:'frameless', animate:true,openjs:function(){openJS()}})">Image, Load Callback</li>

If iFrame content is to added:

<li onclick="TINY.box.show({iframe:'http://www.google.com/',boxid:'frameless',width:750,height:450,fixed:false, maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}})">iFrame, Blue Mask, Absolute Position, Frameless, Close Callback</li>

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.