Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » How To Add A Zoom Effect To Images Using jQuery

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Add A Zoom Effect To Images Using jQuery

How To Add A Zoom Effect To Images Using jQuery

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

2,224 views

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="http://1.bp.blogspot.com/-CV-pv5fPDgg/T1OXJWe1OaI/AAAAAAAAAGs/2ICEdv7fWSU/s1600/best-nature-full-hd-wallpapers-17.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img height="180" src="http://1.bp.blogspot.com/-CV-pv5fPDgg/T1OXJWe1OaI/AAAAAAAAAGs/2ICEdv7fWSU/s320/best-nature-full-hd-wallpapers-17.jpg" width="320" /></a></div>

Liked It ? Please Share

Comments

4 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. yeah nice one from you.it can also be done through a:hover effect where we will increase the image size on hover.thanks for sharing

  2. Cara Untuk says:

    Thanks for this tricks, it’s so useful.

  3. Nick Sanders says:

    I don’t now why but it does not working

  4. Interesting article indeed. I’ve been wanting to add a nice, rather subtle zoom effect to my web elements and the script presented in this article works superbly well. The only problem I have is not being able to integrate it into a:hover. Pointers would be very appreciated :)

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here