How To Add A Zoom Effect To Images Using jQuery in Blogger

When you’d like to show your visitors a larger version of an image on your website, what you would usually do is provide a link that will open up another tab or window that will contain the high resolution image. And while that may be the simplest way of handling it, some still don’t like the idea of diverting the viewer’s attention from the page.
That’s where this nice little jQuery trick comes in courtesy of Shiv Chawla of tipsntrack. Once you have this done on your Blogger blog, whenever someone hovers their mouse cursor over the image, a separate box will appear within the current page and show the image which is zoomed (only the specific part where the mouse hovers is zoomed).
Here’s how you can implement it on your blog:

• From you Blogger dashboard, go to Template.

• Click on Edit HTML and then on Proceed.

• Place a check inside the Expand Widgets Template box.

• By using Ctrl+F, search for the </head> tag and then copy/paste the following code right above and before 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> 

• Next, using Ctrl+F again, look for ]]></b:skin> and then copy/paste the following code shown above and before 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;
}   

NOTE: You might want to change the value left:50%; in the above code to make the necessary adjustment to the location of the box that displays the zoomed image.

• Save your template.

• To add the zoom effect to a particular image, just add class=”zoom” inside the image’s <a></a> tag. See the example below:

<class="zoom" a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaRbRZAXt6ZxkGoNdy_zv7G93Ymr8QpS3AAPSSIEqyVcZiGYL-zfOlTr3TbazswNsdD4mq_lmMvTHatqt-0pRX7l5fdgA0W2eQmmQzgI-OfLSLgZNHV8kzb2lvduccMgcVdS3POr5URQA/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/AVvXsEgaRbRZAXt6ZxkGoNdy_zv7G93Ymr8QpS3AAPSSIEqyVcZiGYL-zfOlTr3TbazswNsdD4mq_lmMvTHatqt-0pRX7l5fdgA0W2eQmmQzgI-OfLSLgZNHV8kzb2lvduccMgcVdS3POr5URQA/s320/best-nature-full-hd-wallpapers-17.jpg" width="320" /></a></div>