Add jQuery Image Zoom Effect in Blogger

In my previous post i have shared How To Add a Zoom/Spectacular jQuery Inner Zoom Effect to an image in Blogger. This effect is similar to the inner zoom effect. The only difference is that this effect appears in a seprate box while the inner zoom effect appear internally. When someone put their mouse over the image, a seprate box will appear on the screen that will show the image which is zoomed. Only the specific part is zoomed where your mouse cursor is placed. You need a HD image to view this effect deeply

Zoom Effect To An Image Demo

Live Demo

How To Add Zoom/Spectacular jQuery Inner Zoom Effect to an image to blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</head>

• Now Paste the Code shown below just before/above it

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://js.howtouses.com/blogger/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$(&#39;a.zoom&#39;).each(function(i) {
$(this).easyZoom();
});
});
</script>

• Now Find the code shown below using [ctrl+F]

]]></b:skin>

• Now Paste the Code shown below just before/above it

#easy_zoom{
width:500px;
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;
}

Change left:50% according to your template

Now How To Add Zoom Effect

• To Add This Effect You Have To Add This Code To The Image

<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOcZT3Ctc_2fyBpAgZJG60oRBUsePspMWeH5zE-CkS6pGGd3l4jlZ1FJ0kEU4gRUq72yHb2U4XtHbGxEJes7Z9TwwZ60gLet5xisf9mA11xdGXEptdubFbX7AMkbQBCs1CTSqEbpaFdI/s1600/best-nature-full-hd-wallpapers-17.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOcZT3Ctc_2fyBpAgZJG60oRBUsePspMWeH5zE-CkS6pGGd3l4jlZ1FJ0kEU4gRUq72yHb2U4XtHbGxEJes7Z9TwwZ60gLet5xisf9mA11xdGXEptdubFbX7AMkbQBCs1CTSqEbpaFdI/s320/best-nature-full-hd-wallpapers-17.jpg" width="320" /></a></div>

Like it? Share it.