An Amazing jQuery Image Zoom Effect For Blogger

Posted : Tuesday, May 10, 2011 | Post Author : Paul Crowe | 56 comments

Many of the latest posts have been looking at Css effects and Image effects so in this post we will continue with the images but bring some jQuery into the mix.If your a beginner thinking whats he talking about don’t worry we will have all the steps set up for simple copy and paste.The effect we will achieve in this post is very cool.When you add an image to your blog you can allow users to hover over that image and a larger version appears.Users can then move the cursor around the small image and see it zoomed.The demo below will show you exactly how it works.


View Demo Button


How cool is that ? This is great for blogs that use lots of images especially photography blogs with high quality in dept images.You can have a medium sized image in your blog post but still let people get a close look without having to click through.Credit and thanks for the original code Goes To the awesome Css Globe Check Them Out.

Inner Zoom – We have since published a post with the same zoom effect but instead of it appearing in a container it appears within the image – jQuery Inner Image Zoom Effect.

Add jQuery Image Zoom To Your Blogger Blog

OK there are a number of things we are looking for.Obviously the original picture will need to be fairly large, the placeholder for the zoom image is 600×400 so anything from 500px up (Beginners – if you go to the demo and hover, you want the original picture to be as big or bigger than the box holding the zoomed image, You can get more details in the video tutorial).We then add the full size image and re sized image to the post.

Add The Css And Scripts

Step 1. In your Blogger Dashboard Click Design > Edit Html

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)

]]></b:skin>

Step 3. Copy And Paste The Following Code Directly Above ]]></b:skin>

#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;
}

Important – You may need to change the highlighted code above to suit your template.This sets the distance of the zoom image from the side of the page, see more on this in the Video Tutorial.

Step 4. Now Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)

</head>

Step 5. Copy and paste the following piece of code Directly Above </head>

Important – The code highlighted in yellow is the main jQuery script, if you already have jQuery in your template don’t add this.

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js’ type=’text/javascript’/>

<script src=’http://suyb.googlecode.com/files/easyzoom.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$().ready(function() {
$(‘a.zoom’).each(function(i) {
$(this).easyZoom();
});
});
</script>

Step 6. Save Your Template, that’s the jQuery and Css added now you just gotta add your images.

Adding The Image To Your Posts

When you upload a large image to Blogger it will often be re-sized to fit your posts.This is actually perfect as the re-sized image will be in your posts but the zoom will use the original size.The image code you upload will look as below and you simply add class=”zoom” as highlighted :

<div class=”separator” style=”clear: both; text-align: center;”>
<a class=”zoom” href=”http://2.bp.blogspot.com/-DPjvBLRp3XI/Tcl3KDrv0dI/AAAAAAAADwY/lyta4cvd9r0/s1600/large.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ height=”205″ src=”http://2.bp.blogspot.com/-DPjvBLRp3XI/Tcl3KDrv0dI/AAAAAAAADwY/lyta4cvd9r0/s320/large.jpg” width=”320″ /></a></div>

You can see more on this in the video tutorial below.

Video Tutorial

That’s a really awesome Zoom effect for images on your Blogger Blogs.Make sure to check out more of our Image Tips and Blog Design Posts.

Drop Your Comments And Questions Below.

56 comments:

  1. Awesome effect thanks for the share its perfect for one of my blogs.

    ReplyDelete

  2. Benta At SLIKstitchesMay 11, 2011 at 7:06 AM

    So you need to do this for each post? Rather than set it up for all posts? (I’m reading your blog post on an iPad but edit my blog on a pc, else I woul try rather than ask 🙂

    ReplyDelete

  3. Benta At SLIKstitchesMay 11, 2011 at 7:11 AM

    Sorry – when I posted the comment the refresh actually showed me the video that it hadn’t previously loaded, question answered! Thanks

    ReplyDelete

  4. GREAT tute, thank you..it even worked for me lol

    ReplyDelete

  5. I was thinking, it would be cool if you posted something about zooming, when u posted your Floating pic post last time. U read my mind 😀

    ReplyDelete

  6. @ Benta – It’s quiet simple isn’t it 🙂

    @ Pink Princess – I had a quick look at your blog and it looks great, the tea pot as a cursor kinda caught me…very cute 🙂

    @ Samiul – That’s my day job, reading minds ! So no bad thoughts.Glad you liked it .. and isn’t it so simple as well perfect for blogger.

    ReplyDelete

     

    Replies

     

  7. Daredevil/GauravMay 16, 2012 at 10:06 PM

    sir,i am having 2 problems:-
    1.first in the updated blogger interface,in the template tab,in the dynamic view tab,edit html is not working.so i switched to old blogger interface.
    in this interface when i try to put in the changes and save template 2.)it says “More than one widget was found with id: Navbar1. Widget IDs should be unique.
    please reply.

    Delete

  8.  

  9. This is just simply awesome…. It will come handy to display infographics on my blog.

    Thanks for the TuT Paul 🙂

    ReplyDelete

  10. wanna ask, how can we apply it to all images without having to do it manually to every single image? Thanks! =D

    ReplyDelete

  11. @ Ahmad Nuzul – Don’t be so lazy it takes 5 seconds to add the class :D.It can be done but i would have to change the script and it would confuse beginners having two scripts.

    ReplyDelete

  12. Excellent. Great work!!! Do it more!!! Next time give me a whole picture mode.

    ReplyDelete

  13. Benta At SLIKstitchesMay 15, 2011 at 7:54 AM

    Hi Paul, thank you I really love this effect. From the ‘mistake’ I also got brave enough to move it down, and make it biggerM. Not quite HTML programming I know, but I’m chuffed, thanks for the instructions 🙂

    ReplyDelete

  14. Owh ok, Thanks for the reply, just love your posts =)

    ReplyDelete

  15. v.cool

    So I can chose which images have the effect by editing the class=”zoom?
    because I wouldn’t want that effect on all of my pics.

    Especially my profile pic j/k

    ReplyDelete

  16. Great script but it only appears to work on one image – all the other images simply show a ‘white box’. IF I click the actual post and blogger opens the post then the image works but from the ‘home’ page only one image actually shows the zoomed image – the other images that I added the class simply open a white box . . . any ideas?

    ReplyDelete

  17. @ Annon – Did you add the class to each of the images ?

    ReplyDelete

  18. yea I’m facing the same problem.
    I did add the class to each image, but if I have 2 image or more in the same post, only the last picture will have this effect.

    ReplyDelete

  19. @ Andy @ Anon – I see the problem and I’m looking into it now, if i find a fix i will let you know.

    ReplyDelete

  20. Hi, I would like to know if it is possible to turn the zoom rectangle box smaller, and how to do it

    ReplyDelete

  21. I guess I’ve found it!

    ReplyDelete

  22. Is it possible to change the hand cursor over the image? I would like to have like a big “+” sing or a small square,or a circle, but specifically over the image. Would you tell me how to do that?

    Thanks

    ReplyDelete

  23. @ Magia – I’m afraid You would need to edit the script to do this.

    ReplyDelete

  24. Any chance you have figured out the issues Anon and Andy were experiencing?

    ReplyDelete

  25. @ John P, Andy, Anonymous – You will be glad to know I have updated the code so it will now work on all images in your posts.It is updated in the post, to update it in your blog replace this (May be in there more than once)

    <script type=’text/javascript’>

    jQuery(function($){

    $(‘a.zoom’).easyZoom();

    });

    </script>

    With this :

    <script type=’text/javascript’>
    $().ready(function() {
    $(‘a.zoom’).each(function(i) {
    $(this).easyZoom();
    });
    });
    </script>

    If you have any more trouble let me know.

    ReplyDelete

     

    Replies

     

  26. hi Paul Crowe

    i am looking this effect for each post thumbnail.i need autocratically zoom
    effect for each post. is it possible .Waiting for your kind reply

    Delete

  27.  

  28. hi there. can someone help me out with this script? for some reason the zoomed image is off the screen ive tried messing around with the script but no luck. is it because my image is too large? www.swag-my.blogspot.com

    ReplyDelete

  29. @ Swag – Look at the code highlighted in step 3 and the instructions that go with it.You may need to move the position of the zoom container.I have a new zoom effect ready that zooms within the image, will be posted over the weekend.Maybe that will work better for you if you wanna wait.

    ReplyDelete

  30. hats off sir great work really helped me best luck………….

    ReplyDelete

  31. set class ‘zoom’ to all img elements by :

    pasting this code under the head –>script type=’text/javascript’
    document.getElementsByTagName(“img”).className += “zoom”;

    /script

    ReplyDelete

  32. well script is having in problem in my blog site where i am using the script in first time it works fine after implenting it, but after few days the zooming effect on all images stops, this is what has been happening with my site images, zoom effect not working

    what could be the reason behind the effect stops working after few days,?? is thr problem with with the code. what to do now, please reply soon

    ReplyDelete

  33. @ Raj – It worked at first ? Have you added other scripts since they could be effecting it.

    ReplyDelete

  34. tq so much! i love this. 🙂

    ReplyDelete

  35. that’s so kind of you to share all these nice things!

    ReplyDelete

  36. i followed your instructions but it didn’t work for me. maybe i did something wrong, or it’s about some settings on my computer or browser. i don’t know. i’m not really familiar with this kind of stuff. anyway, i’m really impressed by your generosity. you help a lot of people. 🙂

    ReplyDelete

  37. hello Admin! me again. now it works for me. i was indeed doing something wrong. i guess i have to add: class=”zoom” everytime i post an image. thanks a lot! 🙂

    ReplyDelete

  38. It’s first time worked all image but since a week it’s problem not works for all image. Just zoom one image only….how to fix it pls give me the write solution ASAP
    thanks ………

    ReplyDelete

  39. It’s really great Script but now script is having in problem in my blog site where i am using the script in first time it works fine after implenting it, but after few days the zooming effect on all images stops, zoom effect not working.

    what could be the reason behind the effect stops working after few days,?? how to fix it now , please reply soon

    ReplyDelete

  40. Hi umm….. the zoom effect dosen’t work on my blog :O.

    ReplyDelete

  41. kellylouphotographyOctober 7, 2011 at 5:09 PM

    Finally i found something thatworks wonderfully thank you!!!

    ReplyDelete

  42. Thanks so much, it is very help to make perfect of my blog.

    ReplyDelete

  43. Thank you so much! 🙂

    ReplyDelete

  44. It’s absolutely great, bro. Many many thanks.

    ReplyDelete

  45. hi paul i face same problem
    well script is having in problem in my blog site where i am using the script in first time it works fine after implenting it, but after few days the zooming effect on all images stops, this is what has been happening with my site images, zoom effect not working
    and yes i add new code thr is some thing miss code i guess plz help me out
    here is my blog adress http://onestepdownload.blogspot.in
    thx in advance 🙂 plz help me out

    ReplyDelete

     

    Replies

     

  46. Babbu – Make sure you dont have the main jquery script in your template more than once.Check above the closing head tag ( < /head > without the spaces.

    Delete

  47.  

  48. Thank you very much, it is a really cool effect.
    But i am actually facing some problems, for some reason it ain’t working for me, i did everything right and still.
    Can you please help?

    ReplyDelete

  49. goooooooooood

    ReplyDelete

  50. Michelle B. WatsonMarch 1, 2012 at 7:07 PM

    Thank you so much for doing this demo and making it so super easy to follow. I look forward to looking around on your blog for more great info. Thank YOU!!! =)

    ReplyDelete

  51. Michelle B. WatsonMarch 1, 2012 at 7:09 PM

    Oh….I forgot to ask – is there a way to increase the amount of magnification for the zoom in? Thanks again.

    ReplyDelete

  52. Is there a way to increase the amount of magnification for the zoom in?

    ReplyDelete

  53. Its great. Worked fine for me.

    ReplyDelete

  54. Thanks for giving nice information in very easy steps and your viedeo is very helpful.

    ReplyDelete

  55. Cool! Just do for my blog: http://www.downspaces.com/

    Thanks a lot!

    ReplyDelete

  56. This is awesome!! Only wish there were a way to not have to code the zoom into each post 😛

    ReplyDelete

  57. Jesus, i keep coming back to this site. Thanks alot again !

    ReplyDelete

  58. Thanks for every other magnificent article.
    Where else may just anybody get that type of
    information in such a perfect approach of writing?
    I have a presentation subsequent week, and I am on the look for such information.

    my blog :: binocular reviews (http://www.fotoloid.com)

    ReplyDelete

  59. Divy Singh RathoreJanuary 26, 2014 at 3:50 PM

    Thanks Paul. Its nice zoom effect

    ReplyDelete