Add unique zoom effect to your images using jquery & EasyZoom
1. Log in to your dashboard--> Design- -> Edit HTML
2. Search "Ctrl+F" and find the following code: ]]></b:skin> and before it paste the next one:
#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; }
3. Now find the </head> tag and before it paste the code:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* 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>
If you have Jquery instaled on your template delete the red line.
4. Save the template.
5. The next step is to add the image to your post. When upload a large image it is resized automatic to a smaller dimension.This is perfect because the script wiil use the larger image and the resized one will be displayed on your post.
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/AVvXsEhCXaUbweOP35mYQfZU4_Dtvvnv6NGcCUIdfXO47ArO9d-nWF_Fq6ejWWzBs_AkNTZN4Yofl5JMktWoqm9gbfJE2XP-DlW1MI6Wjig-hk8EXvpGrJDl183EhYAw2Wx6gKGlhuq2FU_IVM5F/s1600/Capture2.PNG" imageanchor="1"
style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="210"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCXaUbweOP35mYQfZU4_Dtvvnv6NGcCUIdfXO47ArO9d-nWF_Fq6ejWWzBs_AkNTZN4Yofl5JMktWoqm9gbfJE2XP-DlW1MI6Wjig-hk8EXvpGrJDl183EhYAw2Wx6gKGlhuq2FU_IVM5F/s320/Capture2.PNG" width="320" /></a></div>
5 comments
Nu poti face un tutorial cu font-uri pentru blogger. Multumesc
Nice tutorial.
but i have pictures zoomed not in front of blog skin. please check my preview here
http://img840.imageshack.us/img840/5631/zoome.png
Add:
z-index: 99999;
to the code on step 2.
Wow. you're great man... :)
i will add your tutorial into my blog and of course a credits to.
one request, can u help me to add reply button on comment posted?
thanks a lot
nice tutorial artis :) and nice template too.
The Tech Fizz
Click to Add a New Comment
Leave your comment
- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.