How To Add JQuery Image Zoom Effect To Your Blog

Views:

It is a Jquery image zoom plugin for blogger.It will help to zoom your image without loss of clarity.If you can add small image in your blog post but it convert images size to large when cursor move on image.

Step 1. Log in Blogger Dashboard and Click Layout > Edit Html

Step 2. Find ]]></b:skin> (Ctrl+F).

Step 3. Copy paste the below code directly above ]]></b:skin>

Copy This Code

#easy_zoom{
width:600px;
height:400px; 
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

Step 4. Now Find </head> (Ctrl+F)

Step 5. Copy and paste the following code directly above </head>

Copy This Code



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src='http://www.weebly.com/uploads/8/2/7/3/8273197/zoom_image_entertainment.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function($){
$(&#39;a.zoom&#39;).easyZoom();
});

Important - The red coloured code is the main jQuery script, if you already have jQuery in your template. Then leave the highlighted code.

Demo: Please Click below Image