28 May 2011
Implementing Pirobox in Blogger

Pirobox is a jQuery plugin that you can use to create Lighbox widget with support for multiple image sets and slideshows.It also allows for embedding YouTube and Vimeo videos. It offers keyboard navigation, PNG Fix for IE6 and will automatically check for broken links to image files and display appropriate message. Pirobox is cross browser plugin that works on FireFox 2+, Opera9.5+, Chrome, Safari (Mac/Windows),IE 6+.

Implementation is straightforward like any other lightbox. Pirobox comes with three built in styles: shadow,white or black and can be easily configured to customize behavior. Configuration options include: animation speed; background opacity; radius of the rounded corners; slideshow speed, previsou and next button placement, etc.

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/Pirobox/style.css" media="screen" rel="stylesheet" type="text/css"></link>    
 <script src="http://dl.dropbox.com/u/27675057/Pirobox/jquery.min.js" type="text/javascript"></script>    
 <script src="http://dl.dropbox.com/u/27675057/Pirobox/pirobox_extended_min.js" type="text/javascript"></script>    
 <script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Pirobox/jquery-ui-1.8.2.custom.min.js"></script>

Now search for the </body> tag and paste the following code just Above/Before it.

<script type="text/javascript">   
 $(document).ready(function() {      
 $().piroBox_ext({      
 piro_speed : 700,         
 bg_alpha : 0.5,        
 piro_scroll : true // pirobox always positioned at the center of the page      
 });  });   
 </script>

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

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

<link href="http://dl.dropbox.com/u/27675057/Pirobox/style.css" media="screen" rel="stylesheet" type="text/css"></link>    
 <script src="http://dl.dropbox.com/u/27675057/Pirobox/jquery.min.js" type="text/javascript"></script>    
 <script src="http://dl.dropbox.com/u/27675057/Pirobox/pirobox_extended_min.js" type="text/javascript"></script>    
 <script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Pirobox/jquery-ui-1.8.2.custom.min.js"></script>    
 <script type="text/javascript">   
 $(document).ready(function() {      
 $().piroBox_ext({      
 piro_speed : 700,         
 bg_alpha : 0.5,        
 piro_scroll : true // pirobox always positioned at the center of the page      
 });  });   
 </script>

4.Now for adding the elements,for example you have to add image into Pirobox ,Firstly add the image normally using Insert Image button

Now When you see the code in the edit HTML window 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 class="pirobox_gall" href="/large3.jpg" rel="gallery"><imgborder="0" height="90" src="/small3.jpg" width="120" /></a>

As you can see we added only aclass="pirobox_gall" and add a rel tag for adding gallery files.

Some Example Codes

<a class="pirobox_gall" href="http://dl.dropbox.com/u/27675057/Pirobox/26.jpg" rel="gallery" title="Curious kitten.">  
 <img alt="image" src="http://dl.dropbox.com/u/27675057/Pirobox/26s.jpg" />  
 </a>  
 <a class="pirobox_gall" href="http://dl.dropbox.com/u/27675057/Pirobox/27.jpg" rel="gallery" title="Lights"><img alt="image" src="http://dl.dropbox.com/u/27675057/Pirobox/27s.jpg" /></a>  
 <a class="pirobox_gall" href="http://dl.dropbox.com/u/27675057/Pirobox/29.jpg" rel="gallery" title="Sun salutation."><img alt="image" src="http://dl.dropbox.com/u/27675057/Pirobox/29s.jpg" /></a>  
 <a class="pirobox_gall" href="http://dl.dropbox.com/u/27675057/Pirobox/30.jpg" rel="gallery" title="Bonfire"><img alt="image" src="http://dl.dropbox.com/u/27675057/Pirobox/30s.jpg" /></a>  
 <h2 class="my_title">  
 <a href="http://www.youtube-nocookie.com/v/Bkjv9SscotY&amp;hl=it_IT&amp;fs=1?rel=0" rel="iframe-640-505" class="pirobox_gall1" title="You tube "><b style="font-size:10px;">%u25BA</b> <span class="span_f_c">You Tube</span> <b style="font-size:12px;"> Open </b><span style="font-size:10px;"> (640x505px)</span></a></h2>  
 <h2 class="my_title">  
 <a href="http://www.jquery.com" rel="iframe-full-full" class="pirobox_gall1" title="jQuery website"><b style="font-size:10px;">%u25BA </b><span class="span_f_c">jQuery </span><b style="font-size:12px;"> Open </b> <span style="font-size:10px;">(full screen)</span></a></h2>  
 <h2 class="my_title">  
 <a href="http://player.vimeo.com/video/18361415" class="pirobox_gall1" rel="iframe-900-350" title="Intro"><b style="font-size:10px;">%u25BA </b><span class="span_f_c">Vimeo </span><b style="font-size:12px;"> Open </b><span style="font-size:10px;">(900x350px)</span></a></h2>  
 <h2 class="my_title">  
 <a href="http://dl.dropbox.com/u/27675057/Pirobox/intro_ants.swf" class="pirobox_gall1" rel="iframe-900-350" title="Intro"><b style="font-size:10px;">%u25BA </b><span class="span_f_c">SWF </span><b style="font-size:12px;"> Open </b><span style="font-size:10px;">(900x350px)</span></a></h2>

5.Now save the Post/Page andsee 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.

Til next time,
Prayag Verma at 17:41

scribble

28 May 2011 Implementing Pirobox in Blogger

28 May 2011
Implementing Pirobox in Blogger