An Amazing jQuery Image Zoom Effect For Blogger
Image effects so in this post we will continue with the images but bring some jQuery into the mix.If your a beginner thinking whats he talking about don't worry we will have all the steps set up for simple copy and paste.The effect we will achieve in this post is very cool.When you add an image to your blog you can allow users to hover over that image and a larger version appears.Users can then move the cursor around the small image and see it zoomed.The demo below will show you exactly how it works.
demo
Add jQuery Image Zoom To Your Blogger Blog
OK there are a number of things we are looking for.Obviously the original picture will need to be fairly large, the placeholder for the zoom image is 600x400 so anything from 500px up (Beginners - if you go to the demo and hover, you want the original picture to be as big or bigger than the box holding the zoomed image, You can get more details in the video tutorial).We then add the full size image and re sized image to the post.
Add The Css And Scripts
Step 1. In Your Blogger Dashboard Click > Design > Edit Html > Tick The Expand Widget Templates Box.
Step 2.Click Ctrl and F, and Search for ]]></b:skin>and Paste the following code
Just above it paste the code given below,
#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;
}
Important - 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, see more on this in the Video Tutorial.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 blogs Html : (Click Ctrl and F for a search
</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() {
$('a.zoom').each(function(i) {
$(this).easyZoom();
});
});
</script>
<script src='http://suyb.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$('a.zoom').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 :
<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdQRlWjAXJBa3GmKf_GInVXwMF_IzlpgOZaa7-vgM9UpVNCVJFEu_9zs0_oOnf6zhfDa1yT6__AIpQnqy1hgAtiADl7jacq3KSdm_HduGgFQxTzPeit2-xYo3IkM-FYmZ5dtili13-pu0w/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/AVvXsEgdQRlWjAXJBa3GmKf_GInVXwMF_IzlpgOZaa7-vgM9UpVNCVJFEu_9zs0_oOnf6zhfDa1yT6__AIpQnqy1hgAtiADl7jacq3KSdm_HduGgFQxTzPeit2-xYo3IkM-FYmZ5dtili13-pu0w/s320/large.jpg" width="320" /></a></div>
<a class="zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdQRlWjAXJBa3GmKf_GInVXwMF_IzlpgOZaa7-vgM9UpVNCVJFEu_9zs0_oOnf6zhfDa1yT6__AIpQnqy1hgAtiADl7jacq3KSdm_HduGgFQxTzPeit2-xYo3IkM-FYmZ5dtili13-pu0w/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/AVvXsEgdQRlWjAXJBa3GmKf_GInVXwMF_IzlpgOZaa7-vgM9UpVNCVJFEu_9zs0_oOnf6zhfDa1yT6__AIpQnqy1hgAtiADl7jacq3KSdm_HduGgFQxTzPeit2-xYo3IkM-FYmZ5dtili13-pu0w/s320/large.jpg" width="320" /></a></div>
save and done
0 التعليقات:
Post a Comment