How To Add jQuery Image Zooming To Blogger

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

]]></b:skin>

And just After it, paste this code:

<script src='http://www.yourjavascript.com/101102158202/jquery.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/002111184015/jquery.jqzoom.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function(){
$(&quot;img.jqzoom&quot;).jqueryzoom({
xzoom: 200, //zooming div default width(default width value is 200)
yzoom: 200, //zooming div default width(default height value is 200)
offset: 10 //zooming div default offset(default offset value is 10)
//position: &quot;right&quot; //zooming div position(default position value is &quot;right&quot;)
});
});
</script>

<style type='text/css'>
div.zoomdiv {
z-index : 100;
position : absolute;
top:0px;
left:0px;
width : 200px;
height : 200px;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;

}


img.jqzoom{
cursor:crosshair;
position:relative;

}
</style>

Download jquery.js and jquery.jqzoom.js as a zip file from here and host jquery.js and jquery.jqzoom.js yourself.
Now click Save template.

Then, Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add this code in to it:

<span class="tozoom"><img alt="LARGE-IMAGE-ADDRESS" src="SMALL-IMAGE-ADDRESS" class="jqzoom"/></span>

Now click Save.