December 8, 201114 yr Hello friends, I have implemented a jquery image zoom here but cant get rid of the grey border
December 8, 201114 yr what's with the double posts and threads today O_O WDF you so craaaazyyyy Edited December 8, 201114 yr by D.Schuster
December 8, 201114 yr Hello friends, I have implemented a jquery image zoom here but cant get rid of the grey border border:0? not working? found your problem .zoomWrapper{ position:relative; border:1px solid #999; Edited December 8, 201114 yr by D.Schuster
December 8, 201114 yr Author ssry for double post was due to my internet reported it but ur soln dont wrk thats not the grey border
December 8, 201114 yr ssry for double post was due to my internet reported it but ur soln dont wrk thats not the grey border hehe sorry for jumping to wrong conclusions, I quickly searched for a grey border found a border that had the color #999 which is dark grey and thought I found the problem
December 8, 201114 yr Author It's an inline style - is it inserted by the JS? it can be here is js /*! * jQzoom Evolution Library v2.3 - Javascript Image magnifier * http://www.mind-projects.it * * Copyright 2011, Engineer Marco Renzi * Licensed under the BSD license. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions are met: * * Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * * Redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials provided with the distribution. * * Neither the name of the organization nor the * names of its contributors may be used to endorse or promote products * derived from this software without specific prior written permission. * * Date: 03 May 2011 22:16:00 */ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(8($){9 v=($.1A.2j&&$.1A.2k<7);9 w=$(1B.1C);9 y=$(y);9 z=F;$.3d.13=8({G 5.1Y(8(){9 a=5.3e.3f();A(a==\'a\'){Q 13(5,}})};13=8(g,h){9 j=2l;j=$(g).1D("13");A(j)G j;9 k=5;9 l=$.1E({},$.13.2m,h||{});k.3g=g;g.1p=$(g).R(\'1p\');g.1F=F;g.3h=F;g.1u=F;g.1h=F;g.1b={};g.2n=2l;g.14={};g.1G=F;$(g).D({\'3i-1i\':\'1v\',\'3j-3k\':\'1v\'});9 m=$("3l:3m(0)",g);g.V=$(g).R(\'V\');g.1Z=m.R(\'V\');9 n=($.1w(g.V).Y>0)?g.V:g.1Z;9 p=Q 2o(m);9 q=Q 2p();9 r=Q 2q();9 s=Q 2r();9 t=Q 2s();$(g).1H(\'2t\',8(e){e.2u();G F});9 u=[\'20\',\'1c\',\'1j\',\'1q\'];A($.3n($.1w(l.H),u)<0){l.H=\'20\'}$.1E(k,{21:8(){A($(".L",g).Y==0){g.L=$(\'<Z/>\').1I(\'L\');m.3o(g.L)}A(l.H==\'1j\'){l.15=p.w;l.16=p.h}A($(".22",g).Y==0){q.S()}A($(".23",g).Y==0){r.S()}A($(".2v",g).Y==0){t.S()}A(l.24||l.H==\'1c\'||l.1J){k.1K()}k.2w()},2w:8(){A(l.H==\'1c\'){$(".L",g).3p(8(){g.1G=17});$(".L",g).3q(8(){g.1G=F});1B.1C.3r=8(){G F};$(".L",g).D({1L:\'1r\'});$(".22",g).D({1L:\'3s\'})}A(l.H==\'1j\'){$(".1M",g).D({1L:\'3t\'})}$(".L",g).1H(\'3u 3v\',8(a){m.R(\'V\',\'\');$(g).R(\'V\',\'\');g.1F=17;p.1s();A(g.1h){k.25(a)}1k{k.1K()}});$(".L",g).1H(\'3w\',8(a){k.2x()});$(".L",g).1H(\'3x\',8(e){A(e.26>p.E.r||e.26<p.E.l||e.27<p.E.t||e.27>p.E.{q.1N();G F}g.1F=17;A(g.1h&&!$(\'.23\',g).3y(\':2y\')){k.25(e)}A(g.1h&&(l.H!=\'1c\'||(l.H==\'1c\'&&g.1G))){q.1l(e)}});9 c=Q 2z();9 i=0;9 d=Q 2z();d=$(\'a\').3z(8(){9 a=Q 3A("3B[\\\\s]*:[\\\\s]*\'"+$.1w(g.1p)+"\'","i");9 b=$(5).R(\'1p\');A(a.3C(){G 5}});A(d.Y>0){9 f=d.3D(0,1);d.3E(f)}d.1Y(8(){A(l.24){9 a=$.1E({},1O("("+$.1w($(5).R(\'1p\'))+")"));c[i]=Q 28();c[i].1d=a.1x;i++}$(5).2t(8(e){A($(5).3F(\'29\')){G F}d.1Y(8(){$(5).3G(\'29\')});e.2u();k.2A(5);G F})})},1K:8(){A(g.1h==F&&g.1u==F){9 a=$(g).R(\'2B\');g.1u=17;s.2C(a)}},25:8(e){3H(g.2n);q.T();r.T()},2x:8(e){1P(l.H){1t\'1c\':W;1r:m.R(\'V\',g.1Z);$(g).R(\'V\',g.V);A(l.1J){q.1N()}1k{r.O();q.O()}W}g.1F=F},2A:8(a){g.1u=F;g.1h=F;9 b=Q 3I();b=$.1E({},1O("("+$.1w($(a).R(\'1p\'))+")"));A(b.1Q&&b.1x){9 c=b.1Q;9 d=b.1x;$(a).1I(\'29\');$(g).R(\'2B\',d);m.R(\'1d\',c);q.O();r.O();k.1K()}1k{2a(\'2D :: 2E 2F 1R 1x 2G 1Q.\');2b\'2D :: 2E 2F 1R 1x 2G 1Q.\';}G F}});A(m[0].3J){p.1s();A($(".L",g).Y==0)k.21()}8 2o(c){9 d=5;5.6=c[0];5.2H=8(){9 a=0;a=c.D(\'2c-B-P\');M=\'\';9 b=0;b=c.D(\'2c-C-P\');K=\'\';A(a){1R(i=0;i<3;i++){9 x=[];x=a.1S(i,1);A(2I(x)==F){M=M+\'\'+a.1S(i,1)}1k{W}}}A({1R(i=0;i<3;i++){A(!2I(b.1S(i,1))){K=K+b.1S(i,1)}1k{W}}}d.M=(M.Y>0)?1O(M):0;d.K=(K.Y>0)?1O(K):0};5.1s=8(){d.2H();d.w=c.P();d.h=c.12();d.1m=c.3K();d.1e=c.3L();d.E=c.1f();d.E.l=c.1f().C+d.K;d.E.t=c.1f().B+d.M;d.E.r=d.w+d.E.l;d.E.b=d.h+d.E.t;d.2J=c.1f().C+d.1m;d.3M=c.1f().B+d.1e};5.6.2K=8(){2a(\'1T 1U 1V X.\');2b\'1T 1U 1V X.\';};5.6.2L=8(){d.1s();A($(".L",g).Y==0)k.21()};G d};8 2s(){9 a=5;5.S=8(){5.6=$(\'<Z/>\').1I(\'2v\').D(\'2d\',\'2M\').2N(l.2O);$(\'.L\',g).S(5.6)};5.T=8(){5.6.B=(p.1e-5.6.12())/2;5.6.C=(p.1m-5.6.P())/2;5.6.D({B:5.6.B,C:5.6.C,11:\'18\',2d:\'2y\'})};5.O=8(){5.6.D(\'2d\',\'2M\')};G 5}8 2p(){9 d=5;5.6=$(\'<Z/>\').1I(\'22\');5.S=8(){$(\'.L\',g).S($(5.6).O());A(l.H==\'1q\'){5.X=Q 28();5.X.1d=p.6.1d;$(5.6).2e().S(5.X)}};5.2P=8(){5.6.w=(1W((l.15)/g.1b.x)>p.w)?p.w:(1W(l.15/g.1b.x));5.6.h=(1W((l.16)/g.1b.y)>p.h)?p.h:(1W(l.16/g.1b.y));5.6.B=(p.1e-5.6.h-2)/2;5.6.C=(p.1m-5.6.w-2)/2;5.6.D({B:0,C:0,P:5.6.w+\'I\',12:5.6.h+\'I\',11:\'18\',1g:\'1v\',2f:1+\'I\'});A(l.H==\'1q\'){5.X.1d=p.6.1d;$(5.6).D({\'2g\':1});$(5.X).D({11:\'18\',1g:\'1y\',C:-(5.6.C+1-p.K)+\'I\',B:-(5.6.B+1-p.M)+\'I\'})}};5.1N=8(){5.6.B=(p.1e-5.6.h-2)/2;5.6.C=(p.1m-5.6.w-2)/2;5.6.D({B:5.6.B,C:5.6.C});A(l.H==\'1q\'){$(5.X).D({11:\'18\',1g:\'1y\',C:-(5.6.C+1-p.K)+\'I\',B:-(5.6.B+1-p.M)+\'I\'})}s.1l()};5.1l=8(e){g.14.x=e.26;g.14.y=e.27;9 b=0;9 c=0;8 2Q(a){G g.14.x-(a.w)/2<p.E.l}8 2R(a){G g.14.x+(a.w)/2>p.E.r}8 2S(a){G g.14.y-(a.h)/2<p.E.t}8 2T(a){G g.14.y+(a.h)/2>p.E.b}b=g.14.x+p.K-p.E.l-(5.6.w+2)/2;c=g.14.y+p.M-p.E.t-(5.6.h+2)/2;A(2Q(5.6)){b=p.K-1}1k A(2R(5.6)){b=p.w+p.K-5.6.w-1}A(2S(5.6)){c=p.M-1}1k A(2T(5.6)){c=p.h+p.M-5.6.h-1}5.6.C=b;5.6.B=c;5.6.D({\'C\':b+\'I\',\'B\':c+\'I\'});A(l.H==\'1q\'){A($.1A.2j&&$.1A.2k>7){$(5.6).2e().S(5.X)}$(5.X).D({11:\'18\',1g:\'1y\',C:-(5.6.C+1-p.K)+\'I\',B:-(5.6.B+1-p.M)+\'I\'})}s.1l()};5.O=8(){m.D({\'2g\':1});5.6.O()};5.T=8(){A(l.H!=\'1j\'&&(l.2U||l.H==\'1c\')){5.6.T()}A(l.H==\'1q\'){m.D({\'2g\':l.2V})}};5.2h=8(){9 o={};o.C=d.6.C;o.B=d.6.B;G o};G 5};8 2q(){9 b=5;5.6=$("<Z 1z=\'23\'><Z 1z=\'1M\'><Z 1z=\'1X\'></Z><Z 1z=\'2i\'></Z></Z></Z>");5.U=$(\'<2W 1z="3N" 1d="3O:\\\'\\\';" 3P="0" 3Q="0" 3R="2X" 3S="3T" 3U="0" ></2W>\');5.1l=8(){5.6.1n=0;5.6.1o=0;A(l.H!=\'1j\'){1P(l.11){1t"C":5.6.1n=(p.E.l-p.K-J.N(l.19)-l.15>0)?(0-l.15-J.N(l.19)):(p.1m+J.N(l.19));5.6.1o=J.N(l.1a);W;1t"B":5.6.1n=J.N(l.19);5.6.1o=(p.E.t-p.M-J.N(l.1a)-l.16>0)?(0-l.16-J.N(l.1a)):(p.1e+J.N(l.1a));W;1t"2X":5.6.1n=J.N(l.19);5.6.1o=(p.E.t-p.M+p.1e+J.N(l.1a)+l.16<2Y.12)?(p.1e+J.N(l.1a)):(0-l.16-J.N(l.1a));W;1r:5.6.1n=(p.2J+J.N(l.19)+l.15<2Y.P)?(p.1m+J.N(l.19)):(0-l.15-J.N(l.19));5.6.1o=J.N(l.1a);W}}5.6.D({\'C\':5.6.1n+\'I\',\'B\':5.6.1o+\'I\'});G 5};5.S=8(){$(\'.L\',g).S(5.6);5.6.D({11:\'18\',1g:\'1v\',2Z:3V});A(l.H==\'1j\'){5.6.D({1L:\'1r\'});9 a=(p.K==0)?1:p.K;$(\'.1M\',5.6).D({2f:a+\'I\'})}$(\'.1M\',5.6).D({P:J.30(l.15)+\'I\',2f:a+\'I\'});$(\'.2i\',5.6).D({P:\'31%\',12:J.30(l.16)+\'I\'});$(\'.1X\',5.6).D({P:\'31%\',11:\'18\'});$(\'.1X\',5.6).O();A(l.V&&n.Y>0){$(\'.1X\',5.6).2N(n).T()}b.1l()};5.O=8(){1P(l.32){1t\'3W\':5.6.3X(l.33,8(){});W;1r:5.6.O();W}5.U.O()};5.T=8(){1P(l.34){1t\'3Y\':5.6.35();5.6.35(l.36,8(){});W;1r:5.6.T();W}A(v&&l.H!=\'1j\'){5.U.P=5.6.P();5.U.12=5.6.12();5.U.C=5.6.1n;5.U.B=5.6.1o;5.U.D({1g:\'1y\',11:"18",C:5.U.C,B:5.U.B,2Z:3Z,P:5.U.P+\'I\',12:5.U.12+\'I\'});$(\'.L\',g).S(5.U);5.U.T()}}};8 2r(){9 c=5;5.6=Q 28();5.2C=8(a){t.T();5.40=a;5.6.1i.11=\'18\';5.6.1i.2c=\'37\';5.6.1i.1g=\'1v\';5.6.1i.C=\'-41\';5.6.1i.B=\'37\';1B.1C.42(5.6);5.6.1d=a};5.1s=8(){9 a=$(5.6);9 b={};5.6.1i.1g=\'1y\';c.w=a.P();c.h=a.12();c.E=a.1f();c.E.l=a.1f().C;c.E.t=a.1f().B;c.E.r=c.w+c.E.l;c.E.b=c.h+c.E.t;b.x=(c.w/p.w);b.y=(c.h/p.h);g.1b=b;1B.1C.43(5.6);$(\'.2i\',g).2e().S(5.6);q.2P()};5.6.2K=8(){2a(\'1T 1U 1V 38 39 X.\');2b\'1T 1U 1V 38 39 X.\';};5.6.2L=8(){c.1s();t.O();g.1u=F;g.1h=17;A(l.H==\'1c\'||l.1J){q.T();r.T();q.1N()}};5.1l=8(){9 a=-g.1b.x*(q.2h().C-p.K+1);9 b=-g.1b.y*(q.2h().B-p.M+1);$(5.6).D({\'C\':a+\'I\',\'B\':b+\'I\'})};G 5};$(g).1D("13",k)};$.13={2m:{H:\'20\',15:3a,16:3a,19:10,1a:0,11:"44",24:17,2O:\'45 46\',V:17,2U:17,2V:0.4,1J:F,34:\'T\',32:\'O\',36:\'47\',33:\'48\'},3b:8(a){9 b=$(a).1D(\'13\');b.3b();G F},3c:8(a){9 b=$(a).1D(\'13\');b.3c();G F},49:8(a){z=17},4a:8(a){z=F}}})(4b);',62,260,'|||||this|node||function|var|||||||||||||||||||||||||||if|top|left|css|pos|false|return|zoomType|px|Math|bleft|zoomPad|btop|abs|hide|width|new|attr|append|show|ieframe|title|break|image|length|div||position|height|jqzoom|mousepos|zoomWidth|zoomHeight|true|absolute|xOffset|yOffset|scale|drag|src|oh|offset|display|largeimageloaded|style|innerzoom|else|setposition|ow|leftpos|toppos|rel|reverse|default|fetchdata|case|largeimageloading|none|trim|largeimage|block|class|browser|document|body|data|extend|zoom_active|mouseDown|bind|addClass|alwaysOn|load|cursor|zoomWrapper|setcenter|eval|switch|smallimage|for|substr|Problems|while|loading|parseInt|zoomWrapperTitle|each|imagetitle|standard|create|zoomPup|zoomWindow|preloadImages|activate|pageX|pageY|Image|zoomThumbActive|alert|throw|border|visibility|empty|borderWidth|opacity|getoffset|zoomWrapperImage|msie|version|null|defaults|timer|Smallimage|Lens|Stage|Largeimage|Loader|click|preventDefault|zoomPreload|init|deactivate|visible|Array|swapimage|href|loadimage|ERROR|Missing|parameter|or|findborder|isNaN|rightlimit|onerror|onload|hidden|html|preloadText|setdimensions|overleft|overright|overtop|overbottom|lens|imageOpacity|iframe|bottom|screen|zIndex|round|100|hideEffect|fadeoutSpeed|showEffect|fadeIn|fadeinSpeed|0px|the|big|300|disable|enable|fn|nodeName|toLowerCase|el|zoom_disabled|outline|text|decoration|img|eq|inArray|wrap|mousedown|mouseup|ondragstart|move|crosshair|mouseenter|mouseover|mouseleave|mousemove|is|filter|RegExp|gallery|test|splice|push|hasClass|removeClass|clearTimeout|Object|complete|outerWidth|outerHeight|bottomlimit|zoomIframe|javascript|marginwidth|marginheight|align|scrolling|no|frameborder|5001|fadeout|fadeOut|fadein|99|url|5000px|appendChild|removeChild|right|Loading|zoom|slow|2000|disableAll|enableAll|jQuery'.split('|'),0,{}))
December 8, 201114 yr Author Sorry dude, I can't read packed JS. srry here is the real one /*! * jQzoom Evolution Library v2.3 - Javascript Image magnifier * http://www.mind-projects.it * * Copyright 2011, Engineer Marco Renzi * Licensed under the BSD license. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions are met: * * Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * * Redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials provided with the distribution. * * Neither the name of the organization nor the * names of its contributors may be used to endorse or promote products * derived from this software without specific prior written permission. * * Date: 03 May 2011 22:16:00 */ (function ($) { //GLOBAL VARIABLES var isIE6 = ($.browser.msie && $.browser.version < 7); var body = $(document.body); var window = $(window); var jqzoompluging_disabled = false; //disabilita globalmente il plugin $.fn.jqzoom = function (options) { return this.each(function () { var node = this.nodeName.toLowerCase(); if (node == 'a') { new jqzoom(this, options); } }); }; jqzoom = function (el, options) { var api = null; api = $(el).data("jqzoom"); if (api) return api; var obj = this; var settings = $.extend({}, $.jqzoom.defaults, options || {}); obj.el = el; el.rel = $(el).attr('rel'); //ANCHOR ELEMENT el.zoom_active = false; el.zoom_disabled = false; //to disable single zoom instance el.largeimageloading = false; //tell us if large image is loading el.largeimageloaded = false; //tell us if large image is loaded el.scale = {}; el.timer = null; el.mousepos = {}; el.mouseDown = false; $(el).css({ 'outline-style': 'none', 'text-decoration': 'none' }); //BASE IMAGE var img = $("img:eq(0)", el); el.title = $(el).attr('title'); el.imagetitle = img.attr('title'); var zoomtitle = ($.trim(el.title).length > 0) ? el.title : el.imagetitle; var smallimage = new Smallimage(img); var lens = new Lens(); var stage = new Stage(); var largeimage = new Largeimage(); var loader = new Loader(); //preventing default click,allowing the onclick event [exmple: lightbox] $(el).bind('click', function (e) { e.preventDefault(); return false; }); //setting the default zoomType if not in settings var zoomtypes = ['standard', 'drag', 'innerzoom', 'reverse']; if ($.inArray($.trim(settings.zoomType), zoomtypes) < 0) { settings.zoomType = 'standard'; } $.extend(obj, { create: function () { //create the main objects //create ZoomPad if ($(".zoomPad", el).length == 0) { el.zoomPad = $('<div/>').addClass('zoomPad'); img.wrap(el.zoomPad); } if(settings.zoomType == 'innerzoom'){ settings.zoomWidth = smallimage.w; settings.zoomHeight = smallimage.h; } //creating ZoomPup if ($(".zoomPup", el).length == 0) { lens.append(); } //creating zoomWindow if ($(".zoomWindow", el).length == 0) { stage.append(); } //creating Preload if ($(".zoomPreload", el).length == 0) { loader.append(); } //preloading images if (settings.preloadImages || settings.zoomType == 'drag' || settings.alwaysOn) { obj.load(); } obj.init(); }, init: function () { //drag option if (settings.zoomType == 'drag') { $(".zoomPad", el).mousedown(function () { el.mouseDown = true; }); $(".zoomPad", el).mouseup(function () { el.mouseDown = false; }); document.body.ondragstart = function () { return false; }; $(".zoomPad", el).css({ cursor: 'default' }); $(".zoomPup", el).css({ cursor: 'move' }); } if (settings.zoomType == 'innerzoom') { $(".zoomWrapper", el).css({ cursor: 'crosshair' }); } $(".zoomPad", el).bind('mouseenter mouseover', function (event) { img.attr('title', ''); $(el).attr('title', ''); el.zoom_active = true; //if loaded then activate else load large image smallimage.fetchdata(); if (el.largeimageloaded) { obj.activate(event); } else { obj.load(); } }); $(".zoomPad", el).bind('mouseleave', function (event) { obj.deactivate(); }); $(".zoomPad", el).bind('mousemove', function (e) { //prevent fast mouse mevements not to fire the mouseout event if (e.pageX > smallimage.pos.r || e.pageX < smallimage.pos.l || e.pageY < smallimage.pos.t || e.pageY > smallimage.pos. { lens.setcenter(); return false; } el.zoom_active = true; if (el.largeimageloaded && !$('.zoomWindow', el).is(':visible')) { obj.activate(e); } if (el.largeimageloaded && (settings.zoomType != 'drag' || (settings.zoomType == 'drag' && el.mouseDown))) { lens.setposition(e); } }); var thumb_preload = new Array(); var i = 0; //binding click event on thumbnails var thumblist = new Array(); thumblist = $('a').filter(function () { var regex = new RegExp("gallery[\\s]*:[\\s]*'" + $.trim(el.rel) + "'", "i"); var rel = $(this).attr('rel'); if (regex.test(rel)) { return this; } }); if (thumblist.length > 0) { //getting the first to the last var first = thumblist.splice(0, 1); thumblist.push(first); } thumblist.each(function () { //preloading thumbs if (settings.preloadImages) { var thumb_options = $.extend({}, eval("(" + $.trim($(this).attr('rel')) + ")")); thumb_preload[i] = new Image(); thumb_preload[i].src = thumb_options.largeimage; i++; } $(this).click(function (e) { if($(this).hasClass('zoomThumbActive')){ return false; } thumblist.each(function () { $(this).removeClass('zoomThumbActive'); }); e.preventDefault(); obj.swapimage(this); return false; }); }); }, load: function () { if (el.largeimageloaded == false && el.largeimageloading == false) { var url = $(el).attr('href'); el.largeimageloading = true; largeimage.loadimage(url); } }, activate: function (e) { clearTimeout(el.timer); //show lens and zoomWindow lens.show(); stage.show(); }, deactivate: function (e) { switch (settings.zoomType) { case 'drag': //nothing or lens.setcenter(); break; default: img.attr('title', el.imagetitle); $(el).attr('title', el.title); if (settings.alwaysOn) { lens.setcenter(); } else { stage.hide(); lens.hide(); } break; } el.zoom_active = false; }, swapimage: function (link) { el.largeimageloading = false; el.largeimageloaded = false; var options = new Object(); options = $.extend({}, eval("(" + $.trim($(link).attr('rel')) + ")")); if (options.smallimage && options.largeimage) { var smallimage = options.smallimage; var largeimage = options.largeimage; $(link).addClass('zoomThumbActive'); $(el).attr('href', largeimage); img.attr('src', smallimage); lens.hide(); stage.hide(); obj.load(); } else { alert('ERROR :: Missing parameter for largeimage or smallimage.'); throw 'ERROR :: Missing parameter for largeimage or smallimage.'; } return false; } }); //sometimes image is already loaded and onload will not fire if (img[0].complete) { //fetching data from sallimage if was previously loaded smallimage.fetchdata(); if ($(".zoomPad", el).length == 0) obj.create(); } /*========================================================, | Smallimage |---------------------------------------------------------: | Base image into the anchor element `========================================================*/ function Smallimage(image) { var $obj = this; this.node = image[0]; this.findborder = function () { var bordertop = 0; bordertop = image.css('border-top-width'); btop = ''; var borderleft = 0; borderleft = image.css('border-left-width'); bleft = ''; if (bordertop) { for (i = 0; i < 3; i++) { var x = []; x = bordertop.substr(i, 1); if (isNaN(x) == false) { btop = btop + '' + bordertop.substr(i, 1); } else { break; } } } if (borderleft) { for (i = 0; i < 3; i++) { if (!isNaN(borderleft.substr(i, 1))) { bleft = bleft + borderleft.substr(i, 1) } else { break; } } } $obj.btop = (btop.length > 0) ? eval(btop) : 0; $obj.bleft = (bleft.length > 0) ? eval(bleft) : 0; }; this.fetchdata = function () { $obj.findborder(); $obj.w = image.width(); $obj.h = image.height(); $obj.ow = image.outerWidth(); $obj.oh = image.outerHeight(); $obj.pos = image.offset(); $obj.pos.l = image.offset().left + $obj.bleft; $obj.pos.t = image.offset().top + $obj.btop; $obj.pos.r = $obj.w + $obj.pos.l; $obj.pos.b = $obj.h + $obj.pos.t; $obj.rightlimit = image.offset().left + $obj.ow; $obj.bottomlimit = image.offset().top + $obj.oh; }; this.node.onerror = function () { alert('Problems while loading image.'); throw 'Problems while loading image.'; }; this.node.onload = function () { $obj.fetchdata(); if ($(".zoomPad", el).length == 0) obj.create(); }; return $obj; }; /*========================================================, | Loader |---------------------------------------------------------: | Show that the large image is loading `========================================================*/ function Loader() { var $obj = this; this.append = function () { this.node = $('<div/>').addClass('zoomPreload').css('visibility', 'hidden').html(settings.preloadText); $('.zoomPad', el).append(this.node); }; this.show = function () { this.node.top = (smallimage.oh - this.node.height()) / 2; this.node.left = (smallimage.ow - this.node.width()) / 2; //setting position this.node.css({ top: this.node.top, left: this.node.left, position: 'absolute', visibility: 'visible' }); }; this.hide = function () { this.node.css('visibility', 'hidden'); }; return this; } /*========================================================, | Lens |---------------------------------------------------------: | Lens over the image `========================================================*/ function Lens() { var $obj = this; this.node = $('<div/>').addClass('zoomPup'); //this.nodeimgwrapper = $("<div/>").addClass('zoomPupImgWrapper'); this.append = function () { $('.zoomPad', el).append($(this.node).hide()); if (settings.zoomType == 'reverse') { this.image = new Image(); this.image.src = smallimage.node.src; // fires off async $(this.node).empty().append(this.image); } }; this.setdimensions = function () { this.node.w = (parseInt((settings.zoomWidth) / el.scale.x) > smallimage.w ) ? smallimage.w : (parseInt(settings.zoomWidth / el.scale.x)); this.node.h = (parseInt((settings.zoomHeight) / el.scale.y) > smallimage.h ) ? smallimage.h : (parseInt(settings.zoomHeight / el.scale.y)); this.node.top = (smallimage.oh - this.node.h - 2) / 2; this.node.left = (smallimage.ow - this.node.w - 2) / 2; //centering lens this.node.css({ top: 0, left: 0, width: this.node.w + 'px', height: this.node.h + 'px', position: 'absolute', display: 'none', borderWidth: 1 + 'px' }); if (settings.zoomType == 'reverse') { this.image.src = smallimage.node.src; $(this.node).css({ 'opacity': 1 }); $(this.image).css({ position: 'absolute', display: 'block', left: -(this.node.left + 1 - smallimage.bleft) + 'px', top: -(this.node.top + 1 - smallimage.btop) + 'px' }); } }; this.setcenter = function () { //calculating center position this.node.top = (smallimage.oh - this.node.h - 2) / 2; this.node.left = (smallimage.ow - this.node.w - 2) / 2; //centering lens this.node.css({ top: this.node.top, left: this.node.left }); if (settings.zoomType == 'reverse') { $(this.image).css({ position: 'absolute', display: 'block', left: -(this.node.left + 1 - smallimage.bleft) + 'px', top: -(this.node.top + 1 - smallimage.btop) + 'px' }); } //centering large image largeimage.setposition(); }; this.setposition = function (e) { el.mousepos.x = e.pageX; el.mousepos.y = e.pageY; var lensleft = 0; var lenstop = 0; function overleft(lens) { return el.mousepos.x - (lens.w) / 2 < smallimage.pos.l; } function overright(lens) { return el.mousepos.x + (lens.w) / 2 > smallimage.pos.r; } function overtop(lens) { return el.mousepos.y - (lens.h) / 2 < smallimage.pos.t; } function overbottom(lens) { return el.mousepos.y + (lens.h) / 2 > smallimage.pos.b; } lensleft = el.mousepos.x + smallimage.bleft - smallimage.pos.l - (this.node.w + 2) / 2; lenstop = el.mousepos.y + smallimage.btop - smallimage.pos.t - (this.node.h + 2) / 2; if (overleft(this.node)) { lensleft = smallimage.bleft - 1; } else if (overright(this.node)) { lensleft = smallimage.w + smallimage.bleft - this.node.w - 1; } if (overtop(this.node)) { lenstop = smallimage.btop - 1; } else if (overbottom(this.node)) { lenstop = smallimage.h + smallimage.btop - this.node.h - 1; } this.node.left = lensleft; this.node.top = lenstop; this.node.css({ 'left': lensleft + 'px', 'top': lenstop + 'px' }); if (settings.zoomType == 'reverse') { if ($.browser.msie && $.browser.version > 7) { $(this.node).empty().append(this.image); } $(this.image).css({ position: 'absolute', display: 'block', left: -(this.node.left + 1 - smallimage.bleft) + 'px', top: -(this.node.top + 1 - smallimage.btop) + 'px' }); } largeimage.setposition(); }; this.hide = function () { img.css({ 'opacity': 1 }); this.node.hide(); }; this.show = function () { if (settings.zoomType != 'innerzoom' && (settings.lens || settings.zoomType == 'drag')) { this.node.show(); } if (settings.zoomType == 'reverse') { img.css({ 'opacity': settings.imageOpacity }); } }; this.getoffset = function () { var o = {}; o.left = $obj.node.left; o.top = $obj.node.top; return o; }; return this; }; /*========================================================, | Stage |---------------------------------------------------------: | Window area that contains the large image `========================================================*/ function Stage() { var $obj = this; this.node = $("<div class='zoomWindow'><div class='zoomWrapper'><div class='zoomWrapperTitle'></div><div class='zoomWrapperImage'></div></div></div>"); this.ieframe = $('<iframe class="zoomIframe" src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" ></iframe>'); this.setposition = function () { this.node.leftpos = 0; this.node.toppos = 0; if (settings.zoomType != 'innerzoom') { //positioning switch (settings.position) { case "left": this.node.leftpos = (smallimage.pos.l - smallimage.bleft - Math.abs(settings.xOffset) - settings.zoomWidth > 0) ? (0 - settings.zoomWidth - Math.abs(settings.xOffset)) : (smallimage.ow + Math.abs(settings.xOffset)); this.node.toppos = Math.abs(settings.yOffset); break; case "top": this.node.leftpos = Math.abs(settings.xOffset); this.node.toppos = (smallimage.pos.t - smallimage.btop - Math.abs(settings.yOffset) - settings.zoomHeight > 0) ? (0 - settings.zoomHeight - Math.abs(settings.yOffset)) : (smallimage.oh + Math.abs(settings.yOffset)); break; case "bottom": this.node.leftpos = Math.abs(settings.xOffset); this.node.toppos = (smallimage.pos.t - smallimage.btop + smallimage.oh + Math.abs(settings.yOffset) + settings.zoomHeight < screen.height) ? (smallimage.oh + Math.abs(settings.yOffset)) : (0 - settings.zoomHeight - Math.abs(settings.yOffset)); break; default: this.node.leftpos = (smallimage.rightlimit + Math.abs(settings.xOffset) + settings.zoomWidth < screen.width) ? (smallimage.ow + Math.abs(settings.xOffset)) : (0 - settings.zoomWidth - Math.abs(settings.xOffset)); this.node.toppos = Math.abs(settings.yOffset); break; } } this.node.css({ 'left': this.node.leftpos + 'px', 'top': this.node.toppos + 'px' }); return this; }; this.append = function () { $('.zoomPad', el).append(this.node); this.node.css({ position: 'absolute', display: 'none', zIndex: 5001 }); if (settings.zoomType == 'innerzoom') { this.node.css({ cursor: 'default' }); var thickness = (smallimage.bleft == 0) ? 1 : smallimage.bleft; $('.zoomWrapper', this.node).css({ borderWidth: thickness + 'px' }); } $('.zoomWrapper', this.node).css({ width: Math.round(settings.zoomWidth) + 'px' , borderWidth: thickness + 'px' }); $('.zoomWrapperImage', this.node).css({ width: '100%', height: Math.round(settings.zoomHeight) + 'px' }); //zoom title $('.zoomWrapperTitle', this.node).css({ width: '100%', position: 'absolute' }); $('.zoomWrapperTitle', this.node).hide(); if (settings.title && zoomtitle.length > 0) { $('.zoomWrapperTitle', this.node).html(zoomtitle).show(); } $obj.setposition(); }; this.hide = function () { switch (settings.hideEffect) { case 'fadeout': this.node.fadeOut(settings.fadeoutSpeed, function () {}); break; default: this.node.hide(); break; } this.ieframe.hide(); }; this.show = function () { switch (settings.showEffect) { case 'fadein': this.node.fadeIn(); this.node.fadeIn(settings.fadeinSpeed, function () {}); break; default: this.node.show(); break; } if (isIE6 && settings.zoomType != 'innerzoom') { this.ieframe.width = this.node.width(); this.ieframe.height = this.node.height(); this.ieframe.left = this.node.leftpos; this.ieframe.top = this.node.toppos; this.ieframe.css({ display: 'block', position: "absolute", left: this.ieframe.left, top: this.ieframe.top, zIndex: 99, width: this.ieframe.width + 'px', height: this.ieframe.height + 'px' }); $('.zoomPad', el).append(this.ieframe); this.ieframe.show(); }; }; }; /*========================================================, | LargeImage |---------------------------------------------------------: | The large detailed image `========================================================*/ function Largeimage() { var $obj = this; this.node = new Image(); this.loadimage = function (url) { //showing preload loader.show(); this.url = url; this.node.style.position = 'absolute'; this.node.style.border = '0px'; this.node.style.display = 'none'; this.node.style.left = '-5000px'; this.node.style.top = '0px'; document.body.appendChild(this.node); this.node.src = url; // fires off async }; this.fetchdata = function () { var image = $(this.node); var scale = {}; this.node.style.display = 'block'; $obj.w = image.width(); $obj.h = image.height(); $obj.pos = image.offset(); $obj.pos.l = image.offset().left; $obj.pos.t = image.offset().top; $obj.pos.r = $obj.w + $obj.pos.l; $obj.pos.b = $obj.h + $obj.pos.t; scale.x = ($obj.w / smallimage.w); scale.y = ($obj.h / smallimage.h); el.scale = scale; document.body.removeChild(this.node); $('.zoomWrapperImage', el).empty().append(this.node); //setting lens dimensions; lens.setdimensions(); }; this.node.onerror = function () { alert('Problems while loading the big image.'); throw 'Problems while loading the big image.'; }; this.node.onload = function () { //fetching data $obj.fetchdata(); loader.hide(); el.largeimageloading = false; el.largeimageloaded = true; if (settings.zoomType == 'drag' || settings.alwaysOn) { lens.show(); stage.show(); lens.setcenter(); } }; this.setposition = function () { var left = -el.scale.x * (lens.getoffset().left - smallimage.bleft + 1); var top = -el.scale.y * (lens.getoffset().top - smallimage.btop + 1); $(this.node).css({ 'left': left + 'px', 'top': top + 'px' }); }; return this; }; $(el).data("jqzoom", obj); }; //es. $.jqzoom.disable('#jqzoom1'); $.jqzoom = { defaults: { zoomType: 'standard', //innerzoom/standard/reverse/drag zoomWidth: 300, //zoomWindow default width zoomHeight: 300, //zoomWindow default height xOffset: 10, //zoomWindow x offset, can be negative(more on the left) or positive(more on the right) yOffset: 0, //zoomWindow y offset, can be negative(more on the left) or positive(more on the right) position: "right", //zoomWindow default position preloadImages: true, //image preload preloadText: 'Loading zoom', title: true, lens: true, imageOpacity: 0.4, alwaysOn: false, showEffect: 'show', //show/fadein hideEffect: 'hide', //hide/fadeout fadeinSpeed: 'slow', //fast/slow/number fadeoutSpeed: '2000' //fast/slow/number }, disable: function (el) { var api = $(el).data('jqzoom'); api.disable(); return false; }, enable: function (el) { var api = $(el).data('jqzoom'); api.enable(); return false; }, disableAll: function (el) { jqzoompluging_disabled = true; }, enableAll: function (el) { jqzoompluging_disabled = false; } }; })(jQuery);
Create an account or sign in to comment