Another really cool jQuery zoom with thanks to Professor Cloud, for Wordpress and other platforms you can download the effect there.
Add jQuery Inner Zoom Effect To Blogger
Step 1. In Your Blogger Dashboard Click Design > Edit Html
Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):
</head>
Step 3. Copy and Paste the following code Directly Above / Before </head>
Note - If you previously added jQuery To Your Template You Can Remove The Line Highlighted.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/cloud-zoom.1.0.2.js' type='text/javascript'/>
OK thats the jQuery scripts added and as it's an inner zoom we dont need any Css so your ready to add the zoom to your pictures.
Adding The Zoom Effect To Images
To do this we add this snippet of code to your images.
class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"
So in a regular image it would look like this :
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8ZvrtyCvPwLqSBC1dpWtbxrvrTod9v0hvDoBYKBXjf5HqQDl7x30kVHV6-xOcrGjzgfo-cXkN8q0MOFRfqVEUuZ7sohjO5AgfWu4Ee_U38zrNKlWtcFTT6PnuULDUczk658ieuRCcnc/s1600/large-zoom-example.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8ZvrtyCvPwLqSBC1dpWtbxrvrTod9v0hvDoBYKBXjf5HqQDl7x30kVHV6-xOcrGjzgfo-cXkN8q0MOFRfqVEUuZ7sohjO5AgfWu4Ee_U38zrNKlWtcFTT6PnuULDUczk658ieuRCcnc/s640/large-zoom-example.jpg"/></a>
In images uploaded directly to Blogger it would look something like this :
<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8ZvrtyCvPwLqSBC1dpWtbxrvrTod9v0hvDoBYKBXjf5HqQDl7x30kVHV6-xOcrGjzgfo-cXkN8q0MOFRfqVEUuZ7sohjO5AgfWu4Ee_U38zrNKlWtcFTT6PnuULDUczk658ieuRCcnc/s1600/large-zoom-example.jpg" imageanchor="1" =><img border="0" height="409" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8ZvrtyCvPwLqSBC1dpWtbxrvrTod9v0hvDoBYKBXjf5HqQDl7x30kVHV6-xOcrGjzgfo-cXkN8q0MOFRfqVEUuZ7sohjO5AgfWu4Ee_U38zrNKlWtcFTT6PnuULDUczk658ieuRCcnc/s640/large-zoom-example.jpg" width="640" /></a></div>
Easy, Make sure you have the script in the right place, If you already have jQuery in your template remove the line shown and add the snippet to your image code.
Thanks again goes to Professor Cloud, make sure to also check out the Container jQuery Zoom and more of our jQuery Tips And Tricks.