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.




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>
3</script>
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 !

             


Written by Prayag Verma


A blogger and Web Developer currently in college learning about computers. A CSS Lover , Blogger Template Designer and Music Addict ! Get more from Prayag on and Twitter




Want to get these Updates straight to your Inbox , Then Subscribe !




Related Articles


Post a Comment