How To Add jQuery Image Zooming To Blogger

Posted by Lasantha Bandara on November 25th, 2009 File Under : image, jquery1 Comment

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just after the ]]></b:skin> tag.

jQuery Image Zooming

<script src='jquery.js' type='text/javascript'/>
<script src='jquery.jqzoom.js' type='text/javascript'/>
<script type='text/javascript'>
 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;)

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




Important !!! : Download jquery.js and jquery.jqzoom.js as a zip file from here and host jquery.js and jquery.jqzoom.js yourself.

4.Now save your template.

5.Go to Layout--&gt;Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

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

Look at the example below.

<span class="tozoom"><img alt="" src="" class="jqzoom"/></span>

You are done.

File Under : image, jquery

One Response to “How To Add jQuery Image Zooming To Blogger”

  1. Anonymous says:

    Can also be done with jQuery AJAX-ZOOM Plugin easily ::

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.