wordpress spectacular jquery

Blogger And WordPress Spectacular jQuery Image Zoom Effect

image-inner-zoom-with-jquery

A 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 200×200 pixels the zoom appears within that space.Lets look at the demo so you can try it out.

view blogger tutorial demo (8)

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)

</head>

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='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/cloud-zoom.1.0.2.js' 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="http://4.bp.blogspot.com/-6-Dg93s2vpc/TeOAlSCdhkI/AAAAAAAAEL0/mznIqK7yRag/s1600/large-zoom-example.jpg"><img src="http://4.bp.blogspot.com/-6-Dg93s2vpc/TeOAlSCdhkI/AAAAAAAAEL0/mznIqK7yRag/s640/large-zoom-example.jpg"/></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="http://4.bp.blogspot.com/-6-Dg93s2vpc/TeOAlSCdhkI/AAAAAAAAEL0/mznIqK7yRag/s1600/large-zoom-example.jpg" imageanchor="1" =><img border="0" height="409" src="http://4.bp.blogspot.com/-6-Dg93s2vpc/TeOAlSCdhkI/AAAAAAAAEL0/mznIqK7yRag/s640/large-zoom-example.jpg" 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.

What My Robot Recommends:

Blogger And WordPress Spectacular jQuery Image Zoom Effect
Informative
80
Useful
86
Easy To Read
85
Fact
79
Reader Rating0 Votes
0
83