Easy Zoom:Jquery Image Zoom Effect For Blogger

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

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/AVvXsEgHhAHXLczbV04IvzccjKtck1Y8ZPT4-lYhm_zfirEcN3C_dW0yPY-w70jjs01ptTj6NSSBM4jRrOaBGfphPIgMk_qFAtuc5hCsYE8NeYf4njfghvXHc74WlA5zV8s8cVd3QAJ9MvSjW4o/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/AVvXsEgHhAHXLczbV04IvzccjKtck1Y8ZPT4-lYhm_zfirEcN3C_dW0yPY-w70jjs01ptTj6NSSBM4jRrOaBGfphPIgMk_qFAtuc5hCsYE8NeYf4njfghvXHc74WlA5zV8s8cVd3QAJ9MvSjW4o/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.

Share this post