Implementing AnythingZoomer in Blogger

AnythingZoomer is a jQuery plugin that will zoom just about anything. Image, text and calendar zooming are examples presented on its website. You can even double click on the unzoomed object to see the enlarged version.

             

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. 

1	<link href="http://dl.dropbox.com/u/27675057/AnythingZoomer/style.css" rel="stylesheet"type="text/css"></link>

2	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript">

3

</script>

4	<script src="http://dl.dropbox.com/u/27675057/AnythingZoomer/zoomer.jquery.js"type="text/javascript">

5

</script>

2.Go to the Post/Page you want to add AnythingZoomer 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/AnythingZoomer/style.css" rel="stylesheet" type="text/css"></link> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script> 
<script src="http://dl.dropbox.com/u/27675057/AnythingZoomer/zoomer.jquery.js" type="text/javascript">
</script> 

4.Now for adding the anything into AnythingZoomer

<div id="wrap">
<div id="small">
<img alt="small rushmore" src="http://dl.dropbox.com/u/27675057/AnythingZoomer/rushmore_small.jpg" /> </div>
<div id="mover">
<div id="overlay">
</div>
<div id="large">
<img alt="big rushmore" src="http://dl.dropbox.com/u/27675057/AnythingZoomer/rushmore.jpg" />       </div>
</div>
</div>

In between the div tag which has id 'small' should contain the smaller version of the thing you want to Zoom into and the div tag which has id 'large' should contain the larger version.Now also add a JavaScript Snippet just after the scripts added above

<script type="text/javascript">
 
        $(function() {
                    
         $("#wrap").anythingZoomer({
         
            expansionSize: 30,
            speedMultiplier: 1.5
         
         });
         
            
        });
    
</script>

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 !