An Amazing jQuery Image Zoom Effect For Blogger




| 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 600x400 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() {
$(&#39;a.zoom&#39;).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.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

56 comments:

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

    ReplyDelete
  2. 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. 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 :D

    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
    1. 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
  7. This is just simply awesome.... It will come handy to display infographics on my blog.

    Thanks for the TuT Paul :)

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

    ReplyDelete
  9. @ 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
  10. Excellent. Great work!!! Do it more!!! Next time give me a whole picture mode.

    ReplyDelete
  11. 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
  12. Owh ok, Thanks for the reply, just love your posts =)

    ReplyDelete
  13. 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
  14. 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
  15. @ Annon - Did you add the class to each of the images ?

    ReplyDelete
  16. 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
  17. @ Andy @ Anon - I see the problem and I'm looking into it now, if i find a fix i will let you know.

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

    ReplyDelete
  19. 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
  20. @ Magia - I'm afraid You would need to edit the script to do this.

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

    ReplyDelete
  22. @ 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
    1. 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
  23. 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
  24. @ 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
  25. hats off sir great work really helped me best luck.............

    ReplyDelete
  26. 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
  27. 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
  28. @ Raj - It worked at first ? Have you added other scripts since they could be effecting it.

    ReplyDelete
  29. that's so kind of you to share all these nice things!

    ReplyDelete
  30. 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
  31. 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
  32. 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
  33. 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
  34. Hi umm..... the zoom effect dosen't work on my blog :O.

    ReplyDelete
  35. Finally i found something thatworks wonderfully thank you!!!

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

    ReplyDelete
  37. It's absolutely great, bro. Many many thanks.

    ReplyDelete
  38. 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
    1. 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
  39. 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
  40. 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
  41. Oh....I forgot to ask - is there a way to increase the amount of magnification for the zoom in? Thanks again.

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

    ReplyDelete
  43. Its great. Worked fine for me.

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

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

    Thanks a lot!

    ReplyDelete
  46. This is awesome!! Only wish there were a way to not have to code the zoom into each post :P

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

    ReplyDelete
  48. 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



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us