Implementing Cloud Zoom in Blogger

Cloud Zoom is a lightweight, highly customizable jQuery plugin that allows you to add image zooming in your web pages. You can use this plugin to create zoomable images with different features such as tint effect, inner zoom and soft focus. It is a cross browser plugin that works in all major web browsers including IE6.

Cloud Zoom is very easy to implement and is very well documented. You can easily customize the appearance of the smaller image, lens and zoom window using CSS. It offers several configuration options enabling you to customize its behavior including: height, width & positions of zoom window; tint; opacity; amount of smoothness/drift of the zoom image as it moves; enable or disable titles.

             

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 href="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/cloud-zoom.css" rel="stylesheet" type="text/css" />   
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>   
 <script src="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/cloud-zoom.1.0.2.js" type="text/JavaScript">  
 </script>

2.Go to the Post/Page you want to add the Cloud Zoom 

Now go to Edit HTML tab .


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

<link href="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/cloud-zoom.css" rel="stylesheet" type="text/css" />   
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>   
 <script src="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/cloud-zoom.1.0.2.js" type="text/JavaScript">  
 </script> 

4.Now for adding the elements,for example you have to add image into Cloud Zoom,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 class="cloud-zoom" href="large.jpg" id="zoom1" rel="adjustX: 10, adjustY:-4, softFocus:true"><img align="left" alt="" src="small3.jpg" /></a>

As you can see we added only a class=”cloud-zoom” and add a id tag for adding gallery files.
For multiple images together add the following code after the above code

<a class="cloud-zoom-gallery" href="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/20.jpg" rel="useZoom: 'zoom1', smallImage: 'http://dl.dropbox.com/u/27675057/Cloud%20Zoom/20%20%283%29.jpg' " title="Thumbnail 1"> 
<img alt="Thumbnail 1" src="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/20%20%282%29.jpg" /></a>


<a class="cloud-zoom-gallery" href="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/74.jpg" rel="useZoom: 'zoom1', smallImage: 'http://dl.dropbox.com/u/27675057/Cloud%20Zoom/74%20%283%29.jpg' " title="Thumbnail 2"><img alt="Thumbnail 2" src="http://dl.dropbox.com/u/27675057/Cloud%20Zoom/74%20%282%29.jpg" /></a>


Here is a list of parameters and there description included in main JavaScript file of Cloud Zoom:


Parameter Description (from V1.0.0) Default Value
zoomWidth The width of the zoom window in pixels. If ‘auto’ is specified, the width will be the same as the small image. ‘auto’
zoomHeight The height of the zoom window in pixels. If ‘auto’ is specified, the height will be the same as the small image. ‘auto’
position Specifies the position of the zoom window relative to the small image. Allowable values are ‘left’, ‘right’, ‘top’, ‘bottom’, ‘inside’ or you can specifiy the id of an html element to place the zoom window in e.g. position: ‘element1’ ‘right’
adjustX Allows you to fine tune the x-position of the zoom window in pixels. 0
adjustY Allows you to fine tune the y-position of the zoom window in pixels. 0
tint Specifies a tint colour which will cover the small image. Colours should be specified in hex format, e.g. ‘#aa00aa’. Does not work with softFocus. false
tintOpacity Opacity of the tint, where 0 is fully transparent, and 1 is fully opaque. 0.5
lensOpacity Opacity of the lens mouse pointer, where 0 is fully transparent, and 1 is fully opaque. In tint and soft-focus modes, it will always be transparent. 0.5
softFocus Applies a subtle blur effect to the small image. Set to true or false. Does not work with tint. false
smoothMove Amount of smoothness/drift of the zoom image as it moves. The higher the number, the smoother/more drifty the movement will be. 1 = no smoothing. 3
showTitle Shows the title tag of the image. True or false. true
titleOpacity Specifies the opacity of the title if displayed, where 0 is fully transparent, and 1 is fully opaque. 0.5


5.Now save the Post/Page andsee the magic.


Note:Please Host all the files on free hosting service like DropBox  or Blogspot itself !

             

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.

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.
             

Implementing Fancybox in Blogger

FancyBox is a tool for displaying images, HTML content and multi-media in a Mac-style “lightbox” that floats overtop of web page.It is built using the jQuery library

It is a combination of JavaScript, CSS and some images that allow you to create a modal effect using the JavaScript framework jQuery

             

Steps to Add it to Blogger:

1.Login to the Blogger account 

2. Now Go to Design > Edit HTML.


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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">  
 </script>  
 <script src="https://sites.google.com/site/fowziey/jquery.fancybox-1.3.4.js" type="text/javascript">  
 </script>
Now search for the ]]></b:skin> tag and paste the following code just Above/Before it.

#fancybox-loading {  
 position: fixed;  
 top: 50%;  
 left: 50%;  
 width: 40px;  
 height: 40px;  
 margin-top: -20px;  
 margin-left: -20px;  
 cursor: pointer;  
 overflow: hidden;  
 z-index: 1104;  
 display: none;  
 }  
 #fancybox-loading div {  
 position: absolute;  
 top: 0;  
 left: 0;  
 width: 40px;  
 height: 480px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 }  
 #fancybox-overlay {  
 position: absolute;  
 top: 0;  
 left: 0;  
 width: 100%;  
 z-index: 1100;  
 display: none;  
 }  
 #fancybox-tmp {  
 padding: 0;  
 margin: 0;  
 border: 0;  
 overflow: auto;  
 display: none;  
 }  
 #fancybox-wrap {  
 position: absolute;  
 top: 0;  
 left: 0;  
 padding: 20px;  
 z-index: 1101;  
 outline: none;  
 display: none;  
 }  
 #fancybox-outer {  
 position: relative;  
 width: 100%;  
 height: 100%;  
 background: #fff;  
 }  
 #fancybox-content {  
 width: 0;  
 height: 0;  
 padding: 0;  
 outline: none;  
 position: relative;  
 overflow: hidden;  
 z-index: 1102;  
 border: 0px solid #fff;  
 }  
 #fancybox-hide-sel-frame {  
 position: absolute;  
 top: 0;  
 left: 0;  
 width: 100%;  
 height: 100%;  
 background: transparent;  
 z-index: 1101;  
 }  
 #fancybox-close {  
 position: absolute;  
 top: -15px;  
 right: -15px;  
 width: 30px;  
 height: 30px;  
 background: transparent url('https://sites.google.com/site/fowziey/fancybox.png') -40px 0px;  
 cursor: pointer;  
 z-index: 1103;  
 display: none;  
 }  
 #fancybox-error {  
 color: #444;  
 font: normal 12px/20px Arial;  
 padding: 14px;  
 margin: 0;  
 }  
 #fancybox-img {  
 width: 100%;  
 height: 100%;  
 padding: 0;  
 margin: 0;  
 border: none;  
 outline: none;  
 line-height: 0;  
 vertical-align: top;  
 }  
 #fancybox-frame {  
 width: 100%;  
 height: 100%;  
 border: none;  
 display: block;  
 }  
 #fancybox-left, #fancybox-right {  
 position: absolute;  
 bottom: 0px;  
 height: 100%;  
 width: 35%;  
 cursor: pointer;  
 outline: none;  
 background: transparent url('https://sites.google.com/site/fowziey/fancy_blank.gif');  
 z-index: 1102;  
 display: none;  
 }  
 #fancybox-left {  
 left: 0px;  
 }  
 #fancybox-right {  
 right: 0px;  
 }  
 #fancybox-left-ico, #fancybox-right-ico {  
 position: absolute;  
 top: 50%;  
 left: -9999px;  
 width: 30px;  
 height: 30px;  
 margin-top: -15px;  
 cursor: pointer;  
 z-index: 1102;  
 display: block;  
 }  
 #fancybox-left-ico {  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -30px;  
 }  
 #fancybox-right-ico {  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -60px;  
 }  
 #fancybox-left:hover, #fancybox-right:hover {  
 visibility: visible; /* IE6 */  
 }  
 #fancybox-left:hover span {  
 left: 20px;  
 }  
 #fancybox-right:hover span {  
 left: auto;  
 right: 20px;  
 }  
 .fancybox-bg {  
 position: absolute;  
 padding: 0;  
 margin: 0;  
 border: 0;  
 width: 20px;  
 height: 20px;  
 z-index: 1001;  
 }  
 #fancybox-bg-n {  
 top: -20px;  
 left: 0;  
 width: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png');  
 }  
 #fancybox-bg-ne {  
 top: -20px;  
 right: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -162px;  
 }  
 #fancybox-bg-e {  
 top: 0;  
 right: -20px;  
 height: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png');  
 background-position: -20px 0px;  
 }  
 #fancybox-bg-se {  
 bottom: -20px;  
 right: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -182px;   
 }  
 #fancybox-bg-s {  
 bottom: -20px;  
 left: 0;  
 width: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png');  
 background-position: 0px -20px;  
 }  
 #fancybox-bg-sw {  
 bottom: -20px;  
 left: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -142px;  
 }  
 #fancybox-bg-w {  
 top: 0;  
 left: -20px;  
 height: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png');  
 }  
 #fancybox-bg-nw {  
 top: -20px;  
 left: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -122px;  
 }  
 #fancybox-title {  
 font-family: Helvetica;  
 font-size: 12px;  
 z-index: 1102;  
 }  
 .fancybox-title-inside {  
 padding-bottom: 10px;  
 text-align: center;  
 color: #333;  
 background: #fff;  
 position: relative;  
 }  
 .fancybox-title-outside {  
 padding-top: 10px;  
 color: #fff;  
 }  
 .fancybox-title-over {  
 position: absolute;  
 bottom: 0;  
 left: 0;  
 color: #FFF;  
 text-align: left;  
 }  
 #fancybox-title-over {  
 padding: 10px;  
 background-image: url('https://sites.google.com/site/fowziey/fancy_title_over.png');  
 display: block;  
 }  
 .fancybox-title-float {  
 position: absolute;  
 left: 0;  
 bottom: -20px;  
 height: 32px;  
 }  
 #fancybox-title-float-wrap {  
 border: none;  
 border-collapse: collapse;  
 width: auto;  
 }  
 #fancybox-title-float-wrap td {  
 border: none;  
 white-space: nowrap;  
 }  
 #fancybox-title-float-left {  
 padding: 0 0 0 15px;  
 background: url('https://sites.google.com/site/fowziey/fancybox.png') -40px -90px no-repeat;  
 }  
 #fancybox-title-float-main {  
 color: #FFF;  
 line-height: 29px;  
 font-weight: bold;  
 padding: 0 0 3px 0;  
 background: url('https://sites.google.com/site/fowziey/fancybox-x.png') 0px -40px;  
 }  
 #fancybox-title-float-right {  
 padding: 0 0 0 15px;  
 background: url('https://sites.google.com/site/fowziey/fancybox.png') -55px -90px no-repeat;  
 }  
 /* IE6 */  
 .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_close.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_left.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_right.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }  
 .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_left.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_main.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_right.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {  
 height: expression(this.parentNode.clientHeight   "px");  
 }  
 #fancybox-loading.fancybox-ie6 {  
 position: absolute; margin-top: 0;  
 top: expression( (-20   (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 )   ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ))   'px');  
 }  
 #fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_loading.png', sizingMethod='scale'); }  
 /* IE6, IE7, IE8 */  
 .fancybox-ie .fancybox-bg { background: transparent !important; }  
 .fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_n.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_ne.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_e.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_se.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_s.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_sw.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_w.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_nw.png', sizingMethod='scale'); }

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


<script type="text/javascript">  
 //<![CDATA[  
 $(document).ready(function() {  
 /* This is basic settings */  
 $("a.fancy").fancybox();  
 });  
 //]]>  
 </script> 

2.Now go to the Post/Page you want to add the FancyBox and go to Edit HTML.


Now copy the code from below and paste it there

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">  
 </script>  
 <script src="https://sites.google.com/site/fowziey/jquery.fancybox-1.3.4.js" type="text/javascript">  
 </script>  
 <style type="text/CSS">  
 #fancybox-loading {  
 position: fixed;  
 top: 50%;  
 left: 50%;  
 width: 40px;  
 height: 40px;  
 margin-top: -20px;  
 margin-left: -20px;  
 cursor: pointer;  
 overflow: hidden;  
 z-index: 1104;  
 display: none;  
 }  
 #fancybox-loading div {  
 position: absolute;  
 top: 0;  
 left: 0;  
 width: 40px;  
 height: 480px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 }  
 #fancybox-overlay {  
 position: absolute;  
 top: 0;  
 left: 0;  
 width: 100%;  
 z-index: 1100;  
 display: none;  
 }  
 #fancybox-tmp {  
 padding: 0;  
 margin: 0;  
 border: 0;  
 overflow: auto;  
 display: none;  
 }  
 #fancybox-wrap {  
 position: absolute;  
 top: 0;  
 left: 0;  
 padding: 20px;  
 z-index: 1101;  
 outline: none;  
 display: none;  
 }  
 #fancybox-outer {  
 position: relative;  
 width: 100%;  
 height: 100%;  
 background: #fff;  
 }  
 #fancybox-content {  
 width: 0;  
 height: 0;  
 padding: 0;  
 outline: none;  
 position: relative;  
 overflow: hidden;  
 z-index: 1102;  
 border: 0px solid #fff;  
 }  
 #fancybox-hide-sel-frame {  
 position: absolute;  
 top: 0;  
 left: 0;  
 width: 100%;  
 height: 100%;  
 background: transparent;  
 z-index: 1101;  
 }  
 #fancybox-close {  
 position: absolute;  
 top: -15px;  
 right: -15px;  
 width: 30px;  
 height: 30px;  
 background: transparent url('https://sites.google.com/site/fowziey/fancybox.png') -40px 0px;  
 cursor: pointer;  
 z-index: 1103;  
 display: none;  
 }  
 #fancybox-error {  
 color: #444;  
 font: normal 12px/20px Arial;  
 padding: 14px;  
 margin: 0;  
 }  
 #fancybox-img {  
 width: 100%;  
 height: 100%;  
 padding: 0;  
 margin: 0;  
 border: none;  
 outline: none;  
 line-height: 0;  
 vertical-align: top;  
 }  
 #fancybox-frame {  
 width: 100%;  
 height: 100%;  
 border: none;  
 display: block;  
 }  
 #fancybox-left, #fancybox-right {  
 position: absolute;  
 bottom: 0px;  
 height: 100%;  
 width: 35%;  
 cursor: pointer;  
 outline: none;  
 background: transparent url('https://sites.google.com/site/fowziey/fancy_blank.gif');  
 z-index: 1102;  
 display: none;  
 }  
 #fancybox-left {  
 left: 0px;  
 }  
 #fancybox-right {  
 right: 0px;  
 }  
 #fancybox-left-ico, #fancybox-right-ico {  
 position: absolute;  
 top: 50%;  
 left: -9999px;  
 width: 30px;  
 height: 30px;  
 margin-top: -15px;  
 cursor: pointer;  
 z-index: 1102;  
 display: block;  
 }  
 #fancybox-left-ico {  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -30px;  
 }  
 #fancybox-right-ico {  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -60px;  
 }  
 #fancybox-left:hover, #fancybox-right:hover {  
 visibility: visible; /* IE6 */  
 }  
 #fancybox-left:hover span {  
 left: 20px;  
 }  
 #fancybox-right:hover span {  
 left: auto;  
 right: 20px;  
 }  
 .fancybox-bg {  
 position: absolute;  
 padding: 0;  
 margin: 0;  
 border: 0;  
 width: 20px;  
 height: 20px;  
 z-index: 1001;  
 }  
 #fancybox-bg-n {  
 top: -20px;  
 left: 0;  
 width: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png');  
 }  
 #fancybox-bg-ne {  
 top: -20px;  
 right: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -162px;  
 }  
 #fancybox-bg-e {  
 top: 0;  
 right: -20px;  
 height: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png');  
 background-position: -20px 0px;  
 }  
 #fancybox-bg-se {  
 bottom: -20px;  
 right: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -182px;   
 }  
 #fancybox-bg-s {  
 bottom: -20px;  
 left: 0;  
 width: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png');  
 background-position: 0px -20px;  
 }  
 #fancybox-bg-sw {  
 bottom: -20px;  
 left: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -142px;  
 }  
 #fancybox-bg-w {  
 top: 0;  
 left: -20px;  
 height: 100%;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png');  
 }  
 #fancybox-bg-nw {  
 top: -20px;  
 left: -20px;  
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png');  
 background-position: -40px -122px;  
 }  
 #fancybox-title {  
 font-family: Helvetica;  
 font-size: 12px;  
 z-index: 1102;  
 }  
 .fancybox-title-inside {  
 padding-bottom: 10px;  
 text-align: center;  
 color: #333;  
 background: #fff;  
 position: relative;  
 }  
 .fancybox-title-outside {  
 padding-top: 10px;  
 color: #fff;  
 }  
 .fancybox-title-over {  
 position: absolute;  
 bottom: 0;  
 left: 0;  
 color: #FFF;  
 text-align: left;  
 }  
 #fancybox-title-over {  
 padding: 10px;  
 background-image: url('https://sites.google.com/site/fowziey/fancy_title_over.png');  
 display: block;  
 }  
 .fancybox-title-float {  
 position: absolute;  
 left: 0;  
 bottom: -20px;  
 height: 32px;  
 }  
 #fancybox-title-float-wrap {  
 border: none;  
 border-collapse: collapse;  
 width: auto;  
 }  
 #fancybox-title-float-wrap td {  
 border: none;  
 white-space: nowrap;  
 }  
 #fancybox-title-float-left {  
 padding: 0 0 0 15px;  
 background: url('https://sites.google.com/site/fowziey/fancybox.png') -40px -90px no-repeat;  
 }  
 #fancybox-title-float-main {  
 color: #FFF;  
 line-height: 29px;  
 font-weight: bold;  
 padding: 0 0 3px 0;  
 background: url('https://sites.google.com/site/fowziey/fancybox-x.png') 0px -40px;  
 }  
 #fancybox-title-float-right {  
 padding: 0 0 0 15px;  
 background: url('https://sites.google.com/site/fowziey/fancybox.png') -55px -90px no-repeat;  
 }  
 /* IE6 */  
 .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_close.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_left.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_right.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }  
 .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_left.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_main.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_right.png', sizingMethod='scale'); }  
 .fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {  
 height: expression(this.parentNode.clientHeight   "px");  
 }  
 #fancybox-loading.fancybox-ie6 {  
 position: absolute; margin-top: 0;  
 top: expression( (-20   (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 )   ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ))   'px');  
 }  
 #fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_loading.png', sizingMethod='scale'); }  
 /* IE6, IE7, IE8 */  
 .fancybox-ie .fancybox-bg { background: transparent !important; }  
 .fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_n.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_ne.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_e.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_se.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_s.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_sw.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_w.png', sizingMethod='scale'); }  
 .fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_nw.png', sizingMethod='scale'); }  
 </style>  
 <script type="text/javascript">  
 //<![CDATA[  
 $(document).ready(function() {  
 /* This is basic settings */  
 $("a.fancy").fancybox();  
 });  
 //]]>  
 </script>  


3.Now for adding the elements ,for example you have to add image into Fancybox ,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 src="small3.jpg" /></a>

Make it like this

<a class="fancy" href="large3.jpg" rel="gallery1" ><img src="small3.jpg" /></a>
As you can see we added only a class=”fancy” and a rel tag for adding gallery files.

4.Now save the Post/Page and see the magic.

Note: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 Sites 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.
             

Implementing Multibox in Blogger

Multibox is a simple jQuery plugin to overlay elements on a page.Its support Images ,Swfs ,Wmvs ,Flvs ,Mp3s ,IFrames ,Html Elements to name a few.Its lightweight and stylish.

See DemoDownload

Steps to Add it to Blogger:

1.Login to the Blogger account

2. Now Go to Design > Edit HTML.


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

<link href="http://dl.dropbox.com/u/27675057/Multibox/multiBox.css" rel="stylesheet" type="text/css"></link>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/mootools-1.2.4-core-yc%20%281%29.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/mootools-1.2.4.4-more-yc.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/overlay.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/multiBox.js" type="text/javascript">  
 </script>  
 <script type="text/javascript">  
 window.addEvent('domready', function(){  
 //call multiBox  
 var initMultiBox = new multiBox({  
 mbClass: '.mb',//class you need to add links that you want to trigger multiBox with (remember and update CSS files)  
 container: $(document.body),//where to inject multiBox  
 descClassName: 'multiBoxDesc',//the class name of the description divs  
 path: './Files/',//path to mp3 and flv players  
 useOverlay: true,//use a semi-transparent background. default: false;  
 maxSize: {w:600, h:400},//max dimensions (width,height) - set to null to disable resizing  
 addDownload: false,//do you want the files to be downloadable?  
 pathToDownloadScript: './Scripts/forceDownload.asp',//if above is true, specify path to download script (classicASP and ASP.NET versions included)  
 addRollover: true,//add rollover fade to each multibox link  
 addOverlayIcon: true,//adds overlay icons to images within multibox links  
 addChain: true,//cycle through all images fading them out then in  
 recalcTop: true,//subtract the height of controls panel from top position  
 addTips: true,//adds MooTools built in 'Tips' class to each element (see: http://mootools.net/docs/Plugins/Tips)  
 autoOpen: 0//to auto open a multiBox element on page load change to (1, 2, or 3 etc)  
 });  
 });  
 </script>

Now search for the ]]></b:skin> tag and paste the following code just Above/Before it.

body{  
  font-family:Arial;  
 }  
 a.home, a:link.home, a:visited.home, a:hover.home, a:active.home,  
 a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{  
  color:#FF6600;  
  font-family:Verdana, Arial, Helvetica, sans-serif;  
  text-decoration:none;  
  float:right;  
  margin:-13px 0 0 0;  
  font-size:10px;  
 }  
 a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{  
  margin:0;  
 }  
 a:hover.home, a:hover.Download{  
 color:#FFA062;  
 }
2. Now Go to the Post/Page you want to add the MultiBox and go to Edit HTML.

And copy the code from below and paste it there
<link href="http://dl.dropbox.com/u/27675057/Multibox/multiBox.css" rel="stylesheet" type="text/css"></link>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/mootools-1.2.4-core-yc%20%281%29.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/mootools-1.2.4.4-more-yc.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/overlay.js" type="text/javascript">  
 </script>  
 <script src="http://dl.dropbox.com/u/27675057/Multibox/multiBox.js" type="text/javascript">  
 </script>  
 <script type="text/javascript">  
 window.addEvent('domready', function(){  
 //call multiBox  
 var initMultiBox = new multiBox({  
 mbClass: '.mb',//class you need to add links that you want to trigger multiBox with (remember and update CSS files)  
 container: $(document.body),//where to inject multiBox  
 descClassName: 'multiBoxDesc',//the class name of the description divs  
 path: './Files/',//path to mp3 and flv players  
 useOverlay: true,//use a semi-transparent background. default: false;  
 maxSize: {w:600, h:400},//max dimensions (width,height) - set to null to disable resizing  
 addDownload: false,//do you want the files to be downloadable?  
 pathToDownloadScript: './Scripts/forceDownload.asp',//if above is true, specify path to download script (classicASP and ASP.NET versions included)  
 addRollover: true,//add rollover fade to each multibox link  
 addOverlayIcon: true,//adds overlay icons to images within multibox links  
 addChain: true,//cycle through all images fading them out then in  
 recalcTop: true,//subtract the height of controls panel from top position  
 addTips: true,//adds MooTools built in 'Tips' class to each element (see: http://mootools.net/docs/Plugins/Tips)  
 autoOpen: 0//to auto open a multiBox element on page load change to (1, 2, or 3 etc)  
 });  
 });  
 </script>  
 <style type="text/css">  
 body{  
  font-family:Arial;  
 }  
 a.home, a:link.home, a:visited.home, a:hover.home, a:active.home,  
 a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{  
  color:#FF6600;  
  font-family:Verdana, Arial, Helvetica, sans-serif;  
  text-decoration:none;  
  float:right;  
  margin:-13px 0 0 0;  
  font-size:10px;  
 }  
 a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{  
  margin:0;  
 }  
 a:hover.home, a:hover.Download{  
 color:#FFA062;  
 }  
 </style>
3.Now for adding the elements ,for example you have to add image into Multibox ,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="large2.jpg"  title="Image 2"><img  src="small2.jpg" title="Image 1" /></a>
Make it like this
<a class="mb" href="large2.jpg" id="mb2" rel="[images],noDesc" title="Image 2"><img src="small2.jpg" title="Image 1" /></a>
As you can see we added only a class=”mb” and a id tag. For adding multiple files increase the digit of the ID tag consecutively.

You can also give the Description to the element by applying this piece of code just below the element with its respective ID tag
<div class="multiBoxDesc mb4 mbHidden">
This is my description text 4. It can support html.</div>


Here are some example code for Adding different elements:

SWF
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/parallax.swf" id="mb5" rel="width:700,height:200,[flash]" title="Flash">.swf example</a>
<div class="multiBoxDesc mb5 mbHidden">
.swf example by Sai</div>

MOV
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/curly.mov" id="mb6" rel="width:400,height:310," title="Movie">.mov example</a>
<div class="multiBoxDesc mb6 mbHidden">
.mov example</div>

WMV
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/curly.wmv" id="mb8" rel="width:400,height:350," title="Windows Media Video">.wmv example</a>
<div class="multiBoxDesc mb8 mbHidden">
.wmv example</div>

MP3
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/music.mp3" id="mb9" rel="[flash]" title="mp3">.mp3 example</a>
<div class="multiBoxDesc mb9 mbHidden">
.mp3 example</div>

FLV
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/curly.flv" id="mb10" rel="width:400,height:300,[flash]" title="Flash Video">.flv example</a>
<div class="multiBoxDesc mb10 mbHidden">
.flv example</div>

HTML
<a class="mb" href="http://dl.dropbox.com/u/27675057/Multibox/blank.htm" id="mb11" rel="width:400,height:300" title="iFrame">HTML page</a>
<div class="multiBoxDesc mb11 mbHidden">
html</div>


HTML Element
<a class="mb" href="http://www.blogger.com/page-edit.do?blogID=7521351820124661054&amp;pageID=5579707308047961391#htmlElement" id="mb13" rel="type:element" title="HTML element">HTML element</a>
<div class="multiBoxDesc mb13 mbHidden">
html element</div>
<div class="mbHidden" id="htmlElement">
This is a snippet of html.
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</div>

IFRAME
<a class="mb" href="http://www.bbc.co.uk/" id="mb14" rel="width:600,height:400" title="iFrame">bbc.co.uk</a>
<div class="multiBoxDesc mb14 mbHidden">
bbc.co.uk</div>


Note: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.

See DemoDownload

Implementing Jparallax in Blogger

 Jparallax is a Jquery plugin which turns a selected image into a viewport, and all its other images into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions ,they move by different amounts, in a parallaxy kind of way.

Steps for Integrating jParallax into Blogger

1.In the Blogger Dashboard , Go to Template > Edit HTML

2.Click once inside the Edit HTML Editor and then Press CTRL+F(Windows) or COMMAND+F(Mac) , A search box will appear in the right upper corner of the editor itself. Now search for this “</head>” (without quotes) and then paste the following JavaScript just Above it. (Check the Animated GIF to understand better )

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>  
<script type='text/javascript'>
//<![CDATA[
(function(jQuery){function stripFiletype(ref){var x=ref.replace(".html","");return x.replace("#","")}function initOrigin(l){if(l.xorigin=="left"){l.xorigin=0}else{if(l.xorigin=="middle"||l.xorigin=="centre"||l.xorigin=="center"){l.xorigin=0.5}else{if(l.xorigin=="right"){l.xorigin=1}}}if(l.yorigin=="top"){l.yorigin=0}else{if(l.yorigin=="middle"||l.yorigin=="centre"||l.yorigin=="center"){l.yorigin=0.5}else{if(l.yorigin=="bottom"){l.yorigin=1}}}}function positionMouse(mouseport,localmouse,virtualmouse){var difference={x:0,y:0,sum:0};if(!mouseport.ontarget){difference.x=virtualmouse.x-localmouse.x;difference.y=virtualmouse.y-localmouse.y;difference.sum=Math.sqrt(difference.x*difference.x+difference.y*difference.y);virtualmouse.x=localmouse.x+difference.x*mouseport.takeoverFactor;virtualmouse.y=localmouse.y+difference.y*mouseport.takeoverFactor;if(difference.sum<mouseport.takeoverThresh&&difference.sum>mouseport.takeoverThresh*-1){mouseport.ontarget=true}}else{virtualmouse.x=localmouse.x;virtualmouse.y=localmouse.y}}function setupPorts(viewport,mouseport){var offset=mouseport.element.offset();jQuery.extend(viewport,{width:viewport.element.width(),height:viewport.element.height()});jQuery.extend(mouseport,{width:mouseport.element.width(),height:mouseport.element.height(),top:offset.top,left:offset.left})}function parseTravel(travel,origin,dimension){var offset;var cssPos;if(typeof(travel)==="string"){if(travel.search(/^d+s?px$/)!=-1){travel=travel.replace("px","");travel=parseInt(travel,10);offset=origin*(dimension-travel);cssPos=origin*100+"%";return{travel:travel,travelpx:true,offset:offset,cssPos:cssPos}}else{if(travel.search(/^d+s?%$/)!=-1){travel.replace("%","");travel=parseInt(travel,10)/100}else{travel=1}}}offset=origin*(1-travel);return{travel:travel,travelpx:false,offset:offset}}function setupLayer(layer,i,mouseport){var xStuff;var yStuff;var cssObject={};layer[i]=jQuery.extend({},{width:layer[i].element.width(),height:layer[i].element.height()},layer[i]);xStuff=parseTravel(layer[i].xtravel,layer[i].xorigin,layer[i].width);yStuff=parseTravel(layer[i].ytravel,layer[i].yorigin,layer[i].height);jQuery.extend(layer[i],{diffxrat:mouseport.width/(layer[i].width-mouseport.width),diffyrat:mouseport.height/(layer[i].height-mouseport.height),xtravel:xStuff.travel,ytravel:yStuff.travel,xtravelpx:xStuff.travelpx,ytravelpx:yStuff.travelpx,xoffset:xStuff.offset,yoffset:yStuff.offset});if(xStuff.travelpx){cssObject.left=xStuff.cssPos}if(yStuff.travelpx){cssObject.top=yStuff.cssPos}if(xStuff.travelpx||yStuff.travelpx){layer[i].element.css(cssObject)}}function setupLayerContents(layer,i,viewportOffset){var contentOffset;jQuery.extend(layer[i],{content:[]});for(var n=0;n<layer[i].element.children().length;n++){if(!layer[i].content[n]){layer[i].content[n]={}}if(!layer[i].content[n].element){layer[i].content[n]["element"]=layer[i].element.children().eq(n)}if(!layer[i].content[n].anchor&&layer[i].content[n].element.children("a").attr("name")){layer[i].content[n]["anchor"]=layer[i].content[n].element.children("a").attr("name")}if(layer[i].content[n].anchor){contentOffset=layer[i].content[n].element.offset();jQuery.extend(layer[i].content[n],{width:layer[i].content[n].element.width(),height:layer[i].content[n].element.height(),x:contentOffset.left-viewportOffset.left,y:contentOffset.top-viewportOffset.top});jQuery.extend(layer[i].content[n],{posxrat:(layer[i].content[n].x+layer[i].content[n].width/2)/layer[i].width,posyrat:(layer[i].content[n].y+layer[i].content[n].height/2)/layer[i].height})}}}function moveLayers(layer,xratio,yratio){var xpos;var ypos;var cssObject;for(var i=0;i<layer.length;i++){xpos=layer[i].xtravel*xratio+layer[i].xoffset;ypos=layer[i].ytravel*yratio+layer[i].yoffset;cssObject={};if(layer[i].xparallax){if(layer[i].xtravelpx){cssObject.marginLeft=xpos*-1+"px"}else{cssObject.left=xpos*100+"%";cssObject.marginLeft=xpos*layer[i].width*-1+"px"}}if(layer[i].yparallax){if(layer[i].ytravelpx){cssObject.marginTop=ypos*-1+"px"}else{cssObject.top=ypos*100+"%";cssObject.marginTop=ypos*layer[i].height*-1+"px"}}layer[i].element.css(cssObject)}}jQuery.fn.jparallax=function(options){var settings=jQuery().extend({},jQuery.fn.jparallax.settings,options);var settingsLayer={xparallax:settings.xparallax,yparallax:settings.yparallax,xorigin:settings.xorigin,yorigin:settings.yorigin,xtravel:settings.xtravel,ytravel:settings.ytravel};var settingsMouseport={element:settings.mouseport,takeoverFactor:settings.takeoverFactor,takeoverThresh:settings.takeoverThresh};if(settings.mouseport){settingsMouseport.element=settings.mouseport}var layersettings=[];for(var a=1;a<arguments.length;a++){layersettings.push(jQuery.extend({},settingsLayer,arguments[a]))}return this.each(function(){var localmouse={x:0.5,y:0.5};var virtualmouse={x:0.5,y:0.5};var timer={running:false,frame:settings.frameDuration,fire:function(x,y){positionMouse(mouseport,localmouse,virtualmouse);moveLayers(layer,virtualmouse.x,virtualmouse.y);this.running=setTimeout(function(){if(localmouse.x!=x||localmouse.y!=y||!mouseport.ontarget){timer.fire(localmouse.x,localmouse.y)}else{if(timer.running){timer.running=false}}},timer.frame)}};var viewport={element:jQuery(this)};var mouseport=jQuery.extend({},{element:viewport.element},settingsMouseport,{xinside:false,yinside:false,active:false,ontarget:false});var layer=[];function matrixSearch(layer,ref,callback){for(var i=0;i<layer.length;i++){var gotcha=false;for(var n=0;n<layer[i].content.length;n++){if(layer[i].content[n].anchor==ref){callback(i,n);return[i,n]}}}return false}setupPorts(viewport,mouseport);for(var i=0;i<viewport.element.children().length;i++){layer[i]=jQuery.extend({},settingsLayer,layersettings[i],{element:viewport.element.children("*:eq("+i+")")});setupLayer(layer,i,mouseport);if(settings.triggerResponse){setupLayerContents(layer,i,viewport.element.offset())}}viewport.element.children().css("position","absolute");moveLayers(layer,0.5,0.5);if(settings.mouseResponse){jQuery(window).mousemove(function(mouse){mouseport.xinside=(mouse.pageX>=mouseport.left&&mouse.pageX<mouseport.width+mouseport.left)?true:false;mouseport.yinside=(mouse.pageY>=mouseport.top&&mouse.pageY<mouseport.height+mouseport.top)?true:false;if(mouseport.xinside&&mouseport.yinside&&!mouseport.active){mouseport.ontarget=false;mouseport.active=true}if(mouseport.active){if(mouseport.xinside){localmouse.x=(mouse.pageX-mouseport.left)/mouseport.width}else{localmouse.x=(mouse.pageX<mouseport.left)?0:1}if(mouseport.yinside){localmouse.y=(mouse.pageY-mouseport.top)/mouseport.height}else{localmouse.y=(mouse.pageY<mouseport.top)?0:1}}if(mouseport.xinside&&mouseport.yinside){if(!timer.running){timer.fire(localmouse.x,localmouse.y)}}else{if(mouseport.active){mouseport.active=false}}})}if(settings.triggerResponse){viewport.element.bind("jparallax",function(event,ref){ref=stripFiletype(ref);matrixSearch(layer,ref,function(i,n){localmouse.x=layer[i].content[n].posxrat*(layer[i].diffxrat+1)-(0.5*layer[i].diffxrat);localmouse.y=layer[i].content[n].posyrat*(layer[i].diffyrat+1)-(0.5*layer[i].diffyrat);if(!settings.triggerExposesEdges){if(localmouse.x<0){localmouse.x=0}if(localmouse.x>1){localmouse.x=1}if(localmouse.y<0){localmouse.y=0}if(localmouse.y>1){localmouse.y=1}}mouseport.ontarget=false;if(!timer.running){timer.fire(localmouse.x,localmouse.y)}})})}jQuery(window).resize(function(){setupPorts(viewport,mouseport);for(var i=0;i<layer.length;i++){setupLayer(layer,i,mouseport)}})})};jQuery.fn.jparallax.settings={mouseResponse:true,mouseActiveOutside:false,triggerResponse:true,triggerExposesEdges:false,xparallax:true,yparallax:true,xorigin:0.5,yorigin:0.5,xtravel:1,ytravel:1,takeoverFactor:0.65,takeoverThresh:0.002,frameDuration:25};initOrigin(jQuery.fn.jparallax.settings);jQuery(function(){})})(jQuery);
//]]>
</script>
<script type="text/javascript">  
 jQuery(document).ready(function(){  
  jQuery('#parallax').jparallax({});  
 });  
 </script>  

3. Now search for the ]]><b:skin> in the template and copy the following CSS just Above it.

#parallax {
background:#ccc;   
  position:absolute;   
  overflow:hidden;  
  width:970px;   
  height:200px;   
 }  
   

Note: The width and height depends on the dimensions of the images you are using

4.Now copy the following HTML markup where you want to use it

<div id="parallax">  
    <img src="https://4.bp.blogspot.com/-Idfbv0c5mkk/Uui4XscBfpI/AAAAAAAAOuo/igoznJ7pt-U/s1600/1.PNG" alt=""style="width:1323px; height:224px;" />    
    <img src="http://2.bp.blogspot.com/-e4xZWHya4m8/Uui4X-aIbyI/AAAAAAAAOu4/HOwtUUNHri8/s1600/2.png" alt="" style="width:1123px; height:224px;"/>  
    <img src="http://2.bp.blogspot.com/-GgrxkehB7c4/Uui4X1Ld_lI/AAAAAAAAOus/jMITjB-tShs/s1600/3.png" alt="" style="width:1240px; height:224px;"/>  
    <img src="http://1.bp.blogspot.com/-xggnyOiVoEk/Uui4Yk8oHNI/AAAAAAAAOu8/sfxl8WHDa7w/s1600/4.png" alt="" style="width:1320px; height:224px;"/>  
    <img src="http://3.bp.blogspot.com/-tlaNZepgRjo/Uui4YoWWjyI/AAAAAAAAOvA/RKlhIzBg7mQ/s1600/5.png" alt="" style="width:1440px; height:224px;"/>  
   </div>

This is a generic example and this can be used in a number of creative ways