jQuery Image Zoom On Hover Plugin For Blogger And Website

Here we are with a WordPress Plugin that after some customization, working for blogger too. This codes is known as “Easy Zoom” By “CSSGlobe“. In blogger, you have to do some tweaks to use but after one time editing, it will be soo easy as in WordPress. There are many script available for the same purpose but some of them are heavy actually. So here we have best and quick loading script that we are gonna share with you.

In many scripts, they have the same image for thumbnail and zoom. They just change the thumbnail width and height that can cause bad image result or if you will upload a HD image in thumbnail then your load time will be hight. So here in this code, It work on basis of two images. Like one is small(thumbnail) and other is big(after zoom). When you have your mouse over small image then it will automatically show a DIV beside the small image and in which it has big image and it just keep scrolling to that where you move your mouse pointer in small image. So through this process, your load time will not gonna high because it will load your zoom image on mouse hove only with a loading text and will not show little little image while loading, it will load image behind and till then, it keep showing loading text and after some time, it will show whole image in zoom.

You have to add this code in your blogger template once only. The only thing you have to do more is to add class to your desired zoom-able image as class = “zoom” and nothing more. After it, it will be like <a class=”zoom” href=”large.jpg”><img src=”small.jpg”></a> So Now with any more preface, here first see the live DEMO then check out features list and garb the code and enjoy.

Features:

1.) Pure JavaScript/JQuery Code.
2.) Easy Zoom 1.0 By Alen Grakalic.
3.) Different Images As Small And Zoom.
4.) Cross Browsers Completable.
5.) Work With All Version Of JQuery File.
6.) Stylish Zooming Effect.
7.) Awesome Smoothness.
8.) Little JavaScript Code.
9.) No External File Added.
10.) Work On Unlimited Images.
11.) Easy To Add In Blogger.
12.) Quick To Load With Loading Text And Error.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search </head> Code.
7.) Now Copy The Below Code And Paste It Before Code..
8.) Click “Save Template” And Done.

<script src="https://code.jquery.com/jquery-2.0.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*
* Easy Zoom 1.0 - jQuery plugin
* written by Alen Grakalic 
* http://cssglobe.com/post/9711/jquery-plugin-easy-image-zoom
*
* Copyright (c) 2011 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/
/*
Required markup sample
<a href="large.jpg"><img src="small.jpg" alt=""></a>
*/
(function($) {
$.fn.easyZoom = function(options){
var defaults = { 
id: 'easy_zoom',
parent: 'body',
append: true,
preload: 'Loading...',
error: 'There has been a problem with loading the image.'
}; 
var obj;
var img = new Image();
var loaded = false;
var found = true;
var timeout;
var w1,w2,h1,h2,rw,rh;
var over = false;
var options = $.extend(defaults, options); 
this.each(function(){ 
obj = this; 
// works only for anchors
var tagName = this.tagName.toLowerCase();
if(tagName == 'a'){ 
var href = $(this).attr('href'); 
img.src = href + '?' + (new Date()).getTime() + ' =' + (new Date()).getTime();
$(img).error(function(){ found = false; }) 
img.onload = function(){ 
loaded = true; 
img.onload=function(){};
}; 
$(this)
.css('cursor','crosshair')
.click(function(e){ e.preventDefault(); })
.mouseover(function(e){ start(e); })
.mouseout(function(){ hide(); }) 
.mousemove(function(e){ move(e); }) 
};
});
function start(e){
hide(); 
var zoom = $('<div id="'+ options.id +'">'+ options.preload +'</div>');
if(options.append) { zoom.appendTo(options.parent) } else { zoom.prependTo(options.parent) };
if(!found){
error();
} else {
if(loaded){
show(e);
} else {
loop(e);
}; 
}; 
};
function loop(e){
if(loaded){
show(e);
clearTimeout(timeout);
} else {
timeout = setTimeout(function(){loop(e)},200);
};
};
function show(e){
over = true;
$(img).css({'position':'absolute','top':'0','left':'0'});
$('#'+ options.id).html('').append(img); 
w1 = $('img', obj).width();
h1 = $('img', obj).height();
w2 = $('#'+ options.id).width();
h2 = $('#'+ options.id).height();
w3 = $(img).width();
h3 = $(img).height(); 
w4 = $(img).width() - w2;
h4 = $(img).height() - h2; 
rw = w4/w1;
rh = h4/h1;
move(e);
};
function hide(){
over = false;
$('#'+ options.id).remove();
};
function error(){
$('#'+ options.id).html(options.error);
};
function move(e){
if(over){
// target image movement
var p = $('img',obj).offset();
var pl = e.pageX - p.left;
var pt = e.pageY - p.top; 
var xl = pl*rw;
var xt = pt*rh;
xl = (xl>w4) ? w4 : xl;
xt = (xt>h4) ? h4 : xt; 
$('#'+ options.id + ' img').css({'left':xl*(-1),'top':xt*(-1)});
};
};
};
})(jQuery);</script>
<script type="text/javascript">
jQuery(function($){
$('a.zoom').easyZoom();
});
</script type="text/css">
<style>
#easy_zoom{overflow:hidden;position:fixed;top:80px;left:220px;width:600px;height:400px;line-height:400px;text-align:center;color:#333;border:5px solid #eee;background:#fff;-moz-box-shadow:0 0 10px #555;-webkit-box-shadow:0 0 10px #555;-ms-box-shadow:0 0 10px #555;-0-box-shadow:0 0 10px #555;box-shadow:0 0 10px #555;}
</style>

9.) Now Go Where You Want Image Zoom.
10.) Add The Below Code And Save It.

<a class="zoom" href="http://i.imgur.com/jOWDJzc.jpg"><img alt="Samsung-Galaxy-S-IV" src="http://i.imgur.com/KYxVSAi.png" height="400" title="Samsung-Galaxy-S-IV" width="200" /></a>

Customization:

1.) Change Blue Link With Small Image URL.
2.) Change Red Link With Small Image URL.
3.) Save And Done.

Last Words:

This is what we got. If you liked it then share it and leave your feedback. If you have any problem then you can contact so so we can solve your problem.