Implementing Koolbox in Blogger

KoolBox is a jQuery Plugin for displaying image, gallery slide show, inline content, maps, and videos in a "modal-box" style that floats overtop of web page.It comes in five different themes namely facebook, Violet, White, Window-7 and 003366.In this tutorial I will be showcasing the Window-7 theme (my favorite).Some of its other interesting features are:
- Keyboard support
- Zoom effect with overlay shadow
- Rounded corners of overlay window
- Large images fit to browser window

             

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/Koolbox/css/layout.css" rel="stylesheet" type="text/css" />
<link href="http://dl.dropbox.com/u/27675057/Koolbox/css/koolbox/Win7/theme.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/27675057/Koolbox/jquery.easing.min.js" type="text/javascript"></script>
<script src="scripts/metadata.min.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/27675057/Koolbox/koolbox.min.js" type="text/javascript"></script>

2.Go to the Post/Page you want to add Koolbox 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/Koolbox/css/layout.css" rel="stylesheet" type="text/css" />
<link href="http://dl.dropbox.com/u/27675057/Koolbox/css/koolbox/Win7/theme.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/27675057/Koolbox/jquery.easing.min.js" type="text/javascript"></script>
<script src="scripts/metadata.min.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/27675057/Koolbox/koolbox.min.js" type="text/javascript"></script>

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

<a class="kool-box" href="large3.jpg"><img src="small3.jpg" /></a>

As you see we only added class tag namely "kool-box". Now Link this Lightbox with the following JavaScript snippet.

<script type="text/javascript">
        $(function () {
            $('.kool-box').koolbox();
        });
    </script>

Now to add Galleries just see the following code:

<a href="2.png" class="kool-box" rel="kool-box"><img src="D.png" /></a>
<a href="9.jpg" class="kool-box" rel="kool-box"><img src="5D.jpg" /></a>
<a href="29.jpg" class="kool-box" rel="kool-box"><img src="7D.jpg"/></a>

As you see we only added rel="kool-box".


Now Some Working Example Code:

HTML
<a href="#infoContent" class="kool-box {width:300,height:200}">Inline Content</a>



Media
<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294" class="kool-box">SWF</a>
<a href="http://trailers.apple.com/movies/disney/tronlegacy/tronlegacy-tsr1_r640s.mov" class="kool-box">MOV</a> 
<a href="http://www.youtube.com/watch?v=EFJOZkKi7gk" class="kool-box">Youtube</a>
<a href="http://vimeo.com/8578886" class="kool-box">Vimeo</a> 
<a href="http://www.megavideo.com/?v=22DU0O7O" class="kool-box">Megavideo</a>
<a href="http://www.facebook.com/video/video.php?v=452462259845" class="kool-box">Facebook</a>
<a href="http://www.dailymotion.com/video/xhzwb7_videotest-de-dragon-ball-z-budokai-3-sur-ps2_videogames" class="kool-box">DailyMotion</a>
<a href="http://www.veoh.com/watch/v20859242sSZ5BzKR" class="kool-box">Veoh</a> 
<a href="http://www.metacafe.com/watch/6415350/dragon_ball_game_project_age_2011_teaser_trailer/" class="kool-box">Metacafe</a>
<a href="http://clip.vn/watch/DragonBallZ056,zOr" class="kool-box">Clip.Vn</a>


Maps
<a href="http://maps.google.com/maps?hl=vi&xhr=t&q=hanoi viet nam&cp=11&pq=google map&biw=1440&bih=677&um=1&ie=UTF-8&hq=&hnear=0x3135ab9bd9861ca1:0xe7887f7b72ca17a9,H%C3%A0 N%E1%BB%99i, Hanoi&gl=vn&ei=hhD_TYTrIYi0vwOX67GgAw&sa=X&oi=geocode_result&ct=title&resnum=1&sqi=2&ved=0CCMQ8gEwAA"

                class="kool-box {width:800,height:600}">Gmap</a>

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.