Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

Easy Zoom:Jquery image zoom effect for blogger

On By // 19 comments
Advertisement
Easy Zoom is a Jquery image zoom plugin for blogger.This will be very helpful 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. Now you can see the demo will show you exactly how it works.

Live Demo:-

Add jQuery Image Zoom Effect To Your Blog

Add The Css And Scripts

Step 1. In your Blogger Dashboard Click Design > Edit Html
Step 2. Find the following piece of code.
]]></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;
}
Step 4. Now Find the following piece of code in your blog.
</head>
Step 5. Copy and paste the following piece of code Directly Above </head>

Important - The code highlighted in blue is the main jQuery script, if you already have jQuery in your template. Then leave the highlighted code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src='http://blogtipsntricks.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function($){
$(&#39;a.zoom&#39;).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 (Don't upload image smaller than 500px) to Blogger it will often be re-sized to fit your posts.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjckR0LbHc4mVZR5PvnTweoVKV5IxEZb-f7p2Sb-A2eaikLqUcMtXiHc4HS9wLsBJpWQ_9TLxwhdWghNkeTlblh1EJS42CnA1miiuSB29xXZrROHBCPAnjPHG04thfbwayQdmvI3uxJH3k/s1600/WideScreen_Prince+of+Persia+The+Two+Thrones+03.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjckR0LbHc4mVZR5PvnTweoVKV5IxEZb-f7p2Sb-A2eaikLqUcMtXiHc4HS9wLsBJpWQ_9TLxwhdWghNkeTlblh1EJS42CnA1miiuSB29xXZrROHBCPAnjPHG04thfbwayQdmvI3uxJH3k/s1600/WideScreen_Prince+of+Persia+The+Two+Thrones+03.jpg" width="320" /></a></div>
Now you had added the image zoom effect to your blog.Feel free to share this post and leave your thoughts in comments we always want to hear from you.

19 comments:

  1. Actually, it doesn't work. At all.

    ReplyDelete
  2. I followed the instructions precisely. It doesn't work.

    ReplyDelete
    Replies
    1. Give me your blog url where you followed the instruction.

      Delete
  3. Thanks! work great for my blog: http://www.downspaces.com/

    ReplyDelete
  4. Thanks buddy,
    it's really working in my blog
    http://www.q4points.com

    ReplyDelete
  5. it works just on one photo :P don't know why ? ... :P
    www.glarow.blogspot.com

    ReplyDelete
    Replies
    1. Let me know where did you added the photos :)

      Delete
    2. Hello and thank's for this plugin (and sorry for my english!), I have the same problem.
      I've just add it for 3 photos on articles, but it only works for the last one, and the others ones don't have image...
      What's the problem?...
      Thanks again!
      www.doina-lingerie.blogspot.fr

      Delete
  6. Thank you very much ;)
    It is working in my blog
    http://mapcardshunting.blogspot.de/

    ReplyDelete
  7. Hi Firstly thanks, I've been looking for a simple zoom/magnify feature for ages and no one really explains how to implement JQuery easily..but I am defo going to use this in my blog but I want the zoom area to open right next to the image and not a location on screen as I'm wanting to use it for several images in one blog like a portfolio to view art, I currently have huge images in order to view detail but that takes up so much bandwidth..Im not currently using your code but if you view my blog you will understand what I mean

    http://cacrosbyart.blogspot.co.uk/

    ReplyDelete
  8. very much thanks to you..finally i found this tutorial. it's works on my blog..

    ReplyDelete
  9. please help me brother. i implemented as you said but its only zooming for last image of post. Others don't work.
    my site is www.photoshopcreation.blogspot.com. i hope for your reply

    ReplyDelete
  10. it doesn't work for me!! what about The code highlighted in blue is the main jQuery script? i haven't this jQuery on my template so what can i do! delete it or leave him?

    ReplyDelete
  11. This is not working for me , added this code to www.crazyboutiques.com, not working.. any suggestions other than this code any free plugin ?

    ReplyDelete
  12. hi sir hope u will be fine

    sir i have a blog on my button product i upload 04 pix in one post but magnifier works for the last one only pls help

    ReplyDelete
  13. tryed it but it didnt work does this work if your using templates?

    ReplyDelete
  14. It doesn't work help me out!

    ReplyDelete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep