Blogger And Wordpress Spectacular jQuery Image Zoom Effect


jQuery Zoom For Blogger ImagesA few weeks ago i published a very popular post featuring an Amazing jQuery Image Zoom For Blogger.That effect allowed you to display an in dept zoom in a container beside images.In this post we have the same in dept zoom but this time it appears within the image in whats called inner zoom.So if you uploaded an image to your blog that's displayed 200x200 pixels the zoom appears within that space.Lets look at the demo so you can try it out.

View Demo Button

Another really cool jQuery zoom with thanks to Professor Cloud, for Wordpress and other platforms you can download the effect there.

Video Tutorial - View The Video Tutorial At The Bottom Of The Post For Extra Help.

Add jQuery Inner Zoom Effect To Blogger

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

Design Edit Html Blogger

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)


Step 3. Copy and Paste the following code Directly Above / Before </head>

Note - If you previously added jQuery To Your Template You Can Remove The Line Highlighted.

<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>

OK thats the jQuery scripts added and as it's an inner zoom we dont need any Css so your ready to add the zoom to your pictures.

Adding The Zoom Effect To Images

To do this we add this snippet of code to your images.

class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"

So in a regular image it would look like this :

<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href=""><img src=""/></a>

In images uploaded directly to Blogger it would look something like this :

<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="" imageanchor="1" =><img border="0" height="409" src="" width="640" /></a></div>

Easy, Make sure you have the script in the right place, If you already have jQuery in your template remove the line shown and add the snippet to your image code.

Video Tutorial

Thanks again goes to Professor Cloud, make sure to also check out the Container jQuery Zoom and more of our jQuery Tips And Tricks.

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.


  1. This is the best jQuery Inner Zoom Effect Zoom Appears Within Image ever! =D

  2. is this working if you're using classic template?

  3. nice blog, cery attractive article...
    nice to meet you :)
    Beben Koben si Bloglang anu ganteng kalem tea \m/

  4. good article...going to check now on my website

  5. Mine isn't working right. It's like the image is trapped. Moves a tine bit, but it's like the border is holding it in? Do I make any sense? Could you take a look at it for me?

  6. Hello. Thanks for your sharing. This effect worked well for me and I really like it.

    But for now when I write an entry, the effect stops working. I've already checked the code and made sure it was pasted in the right place. Could you advice me if there's something missing?

    Thank you.

  7. awesome! i'm wondering though, how to make the thumbnails to appear on the main picture using cloud zoom like the one in the standard gallery?

  8. is there a simple way of adding a loupe effect to my blog? i've trawled the internet and tried everything (waddazoom, netzesta, iufer, etc) all doesnt seem to work. The methods in this website are awesome, lightbox, inner zoom, zoom in external container all works but i'm wondering is there a similar guide for a loupe effect



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