Amazing JQuery Image Zoom Effect For Blogger

ads

Amazing JQuery Image Zoom Effect For Blogger

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

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


]]></b:skin>

Step 3. Copy And Paste The Following Code Directly Above the code.



#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;
}

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.

Step 4. Now Copy and paste the following piece of code Directly Above.
</head


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

<a class="zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY9S3P9GDnsAdLzt3QyTEF8Vq_3HvLPiXjEf733yIQVrd40jJeck12q68svwRgY-gkevtyYOIwR5soGL7jhYtXFqYICtIGc1LrbXHUR3Ulfe0FAPIOlG82-Bhr4jnDs3-G3t_hP2qrNK7N/s1600/large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY9S3P9GDnsAdLzt3QyTEF8Vq_3HvLPiXjEf733yIQVrd40jJeck12q68svwRgY-gkevtyYOIwR5soGL7jhYtXFqYICtIGc1LrbXHUR3Ulfe0FAPIOlG82-Bhr4jnDs3-G3t_hP2qrNK7N/s320/large.jpg" width="320" /></a>