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.

See DemoDownload



Steps To add into Blogger:

• For Multiple Usage
• For Single Usage

1.Login to your Blogger account and then Go to Design > Edit HTML. (For New Blogger Interface Go to Template > Edit HTML)

2.Search for </head> tag and then paste the following code just Above/Before it.

<script type="text/javascript" src="http://Your-URL/jquery-1.2.6.min.js"></script>  
 <script type="text/javascript" src="http://Your-URL/jquery.jparallax.js"></script>  
<script type="text/javascript">  
 jQuery(document).ready(function(){  
  jQuery('#parallax').jparallax({});  
 });  
 </script>  

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

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

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


3.Now copy the following code either in the Page or Post or Gadget ,where you want to use it

<div id="parallax">  
 <img src="http://dl.dropbox.com/u/27675057/Capturegfhf_2.PNG" alt=""style="width:1323px; height:224px;" />    
    <img src="http://dezignus.com/wp-content/themes/dezignus/images/head_4-trans.png" alt="" style="width:1123px; height:224px;"/>  
    <img src="http://dezignus.com/wp-content/themes/dezignus/images/head_3-trans.png" alt="" style="width:1240px; height:224px;"/>  
    <img src="http://dezignus.com/wp-content/themes/dezignus/images/head_2-trans.png" alt="" style="width:1320px; height:224px;"/>  
    <img src="http://dezignus.com/wp-content/themes/dezignus/images/head_1-trans.png" alt="" style="width:1440px; height:224px;"/>  
   </div>

1.Login to your Blogger account and then Go to Design > Page Elements. (For New Blogger Interface Go to Layout )

2.Click on Add a Gadget and select HTML/Javascript .

3. Now copy the code from below and paste it into the HTML/Javascript element and then Save it.

<script type="text/javascript" src="http://Your-URL/jquery-1.2.6.min.js"></script>  
<script type="text/javascript" src="http://Your-URL/jquery.jparallax.js"></script>  
<script type="text/javascript">  
 jQuery(document).ready(function(){  
  jQuery('#parallax').jparallax({});  
 });  
 </script>  
 <style type="text/CSS">  
 #parallax {  
  background:#ccc;   
  position:absolute;   
  overflow:hidden;  
  width:970px;   
  height:200px;   
 }  
 </style>  
  <div id="parallax">  
 <img src="http://dl.dropbox.com/u/27675057/Capturegfhf_2.PNG" alt=""style="width:1323px; height:224px;" />    
    <img src="http://dezignus.com/wp-content/themes/dezignus/images/head_4-trans.png" alt="" style="width:1123px; height:224px;"/>  
    <img src="http://dezignus.com/wp-content/themes/dezignus/images/head_3-trans.png" alt="" style="width:1240px; height:224px;"/>  
    <img src="http://dezignus.com/wp-content/themes/dezignus/images/head_2-trans.png" alt="" style="width:1320px; height:224px;"/>  
    <img src="http://dezignus.com/wp-content/themes/dezignus/images/head_1-trans.png" alt="" style="width:1440px; height:224px;"/>  
   </div>

4.Now see the magic.

Note: If this code shows error while adding into the Edit HTML, then Click Here to Escape Code and then copy it back

Note: Please host all the above files on a free hosting service like Dropbox or Blogspot itself!

Note: If you are using other Jquery plugins ,there might be conflicts ,which might not let Jparallax function.The solution is that either you use a single Jquery plugin on a page or there is a other way by using jQuery.noConflict().

See DemoDownload