BannerFans.com

Blogger And Wordpress Spectacular JQuery Image Zoom Effect

6:53 AM | , ,

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 200x200 pixels the zoom appears within that space.

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


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):


</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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8ZvrtyCvPwLqSBC1dpWtbxrvrTod9v0hvDoBYKBXjf5HqQDl7x30kVHV6-xOcrGjzgfo-cXkN8q0MOFRfqVEUuZ7sohjO5AgfWu4Ee_U38zrNKlWtcFTT6PnuULDUczk658ieuRCcnc/s1600/large-zoom-example.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8ZvrtyCvPwLqSBC1dpWtbxrvrTod9v0hvDoBYKBXjf5HqQDl7x30kVHV6-xOcrGjzgfo-cXkN8q0MOFRfqVEUuZ7sohjO5AgfWu4Ee_U38zrNKlWtcFTT6PnuULDUczk658ieuRCcnc/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8ZvrtyCvPwLqSBC1dpWtbxrvrTod9v0hvDoBYKBXjf5HqQDl7x30kVHV6-xOcrGjzgfo-cXkN8q0MOFRfqVEUuZ7sohjO5AgfWu4Ee_U38zrNKlWtcFTT6PnuULDUczk658ieuRCcnc/s1600/large-zoom-example.jpg" imageanchor="1" =><img border="0" height="409" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8ZvrtyCvPwLqSBC1dpWtbxrvrTod9v0hvDoBYKBXjf5HqQDl7x30kVHV6-xOcrGjzgfo-cXkN8q0MOFRfqVEUuZ7sohjO5AgfWu4Ee_U38zrNKlWtcFTT6PnuULDUczk658ieuRCcnc/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.

Thanks again goes to Professor Cloud, make sure to also check out the Container jQuery Zoom and more of our jQuery Tips And Tricks.
IconIconIconIconFollow Me on PinterestYouTube
 
Gadgets By For Bloggers