2014 April 29 Archive - EXEIdeas – Let's Your Mind Rock

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 So Now with any more preface, here first see the live DEMO then check out features list and garb the code and enjoy.CLICK HERE TO SEE DEMOFeatures: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.com2.) Open Your Desire “Blog“.3.) Go To “Template“.4.) Click “Edit HTML“.5.) Now Click Within Code Box.6.) Press [CTRL+F] To Search Code.7.) Now Copy The Below Code And Paste It Before Code..8.) Click “Save Template” And Done. /** 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 */(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 anchorsvar 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 = $(' '+ options.preload +' ');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 movementvar 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); jQuery(function($){$('a.zoom').easyZoom();}); #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;} 9.) Now Go Where You Want Image Zoom.10.) Add The Below Code And Save It. 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.