/* * zoomy 1.2 - jquery plugin * http://redeyeops.com/plugins/zoomy * * copyright (c) 2010 jacob lowe (http://redeyeoperations.com) * dual licensed under the mit (mit-license.txt) * and gpl (gpl-license.txt) licenses. * * built for jquery library * http://jquery.com * * addition fixes and modifications done by larry battle ( blarry@bateru.com ) * # code has been refactored and the logic has been corrected. * */ (function($){ // global zoomys state, indexed, 0 = no zoom, 1 = zoom; var zoomystate = []; jquery.fn.zoomy = function(event, options) { //defaults var defaults = { zoomsize: 200, round: true, glare: true, zoomtext: 'default', clickable: false, attr: 'href' }, defaultevent = 'click'; if(typeof(event) === 'object' && options === undefined){ options = event; event = defaultevent; }else if(event === undefined){ event = defaultevent; } options = $.extend(defaults, options); // add zoomy var addzoomy = function(ele, i) { zoomystate.push(0); // adds functionality with ability to zoom in and also link to another page var attribute = function(){ if(typeof(ele.attr(options.attr)) === 'string' && options.attr !== 'href'){ return ele.attr(options.attr); }else{ return ele.attr('href'); } }, image = attribute(), cursor = function(){ if($.browser.mozilla){ return '-moz-zoom-in'; }else if($.browser.webkit){ return '-webkit-zoom-in'; }else{ return 'cell'; } }; ele.css({'position': 'relative', 'cursor': cursor}).append('
'); var zoom = $('.zoom-obj-'+i); zoomparams(ele, zoom); // load zoom image after params are set loadimage(ele, image, zoom); var eventhandler = function(){ var zoomdefaulttext = function(x){ if(options.zoomtext === 'default' || options.zoomtext === ''){ options.zoomtext = x; }; return true; }, clickablity = function(){ if(!options.clickable){ ele.bind('click',function(){return false;}); } }; switch(event){ case 'dblclick' : clickablity(); zoomdefaulttext('double click to zoom in'); break; case 'mouseover' || 'mouseenter' : clickablity(); zoomdefaulttext('mouse over to zoom in'); zoombarenter(ele); break; default: clickablity(); zoomdefaulttext('click to zoom in'); break; } //case with event to initiate the zoom //support for mouseover, mouseenter click, doubleclick, ele.bind(event, function(){ if(zoomystate[i] === 0){ zoom.css({opacity: 1}).addclass('cursorhide').show(); zoomystate[i] = 1; zoombarleave(ele, zoom); settimeout(function () { if (!zoom.find('img').length) { zoomenter(ele, zoom, image); } }, 100); }else{ zoom.css({opacity: 0}).removeclass('cursorhide'); zoomystate[i] = 0; } //unbind event mouse over to fix hover conflict issues if(event === 'mouseover' || event === 'mouseenter'){ ele.unbind(event); } toggleclasses(ele); return false; }); } eventhandler(); //todo fix issue with mouse over and mouse enter conflict with this hover statment ele.hover(function () { if(zoomystate[i] === 0){ zoombarenter(ele); }else{ zoomenter(ele, zoom, image); } }, function (){ if(zoomystate[i] === 0){ zoombarleave(ele); }else{ zoomleave(ele, zoom); } }); }, zoombarenter = function(ele){ var zb = ele.find('.zoombar'); if(zb.length ===0){ // ele.append(''+options.zoomtext+''); }else{ // zb.html(options.zoomtext); } }, zoombarleave = function(ele){ // ele.find('.zoombar').html(options.zoomtext); }, zoomenter = function(ele, zoom, image){ var isidbrokezoomy = (zoom.attr('id') === 'brokezoomy'); if ( !isidbrokezoomy ) { //resetzoom(ele, zoom); startzoom(ele, zoom); toggleclasses(ele); } }, toggleclasses = function(ele){ var img = ele.find('img'); if(zoomystate[ele.find('.zoomy').attr('rel')] === 0){ ele.removeclass('inactive'); }else{ ele.addclass('inactive'); } }, zoomleave = function(ele, zoom){ if (zoom.attr('id') !== 'brokezoomy' && !zoom.find('img').length ) { settimeout(function () { zoom.hide(); },100); } }, // start zoom //includes mouse move event startzoom = function(ele, zoom) { var ratio = function(x, y){ var z = x/y; return z; }, l = ele.offset(), zoomimgx = parseint(ele.attr('x'), 10), zoomimgy = parseint(ele.attr('y'), 10), tnimgx = ele.width(), tnimgy = ele.height(), zoomsize = options.zoomsize, halfsize = zoomsize / 2, ratiox = ratio(tnimgx,zoomimgx), ratioy = ratio(tnimgy,zoomimgy), stop = math.round(halfsize - (halfsize * ratiox)), stoppos = function(x){ var p = (x - zoomsize) + stop; return p; }, rightstop = stoppos(tnimgx), bottomstop = stoppos(tnimgy), zoomy = zoomimgy - zoomsize, zoomx = zoomimgx - zoomsize, mousepos = function(x,y){ var p = x-y-halfsize; return p; }, zoompos = function(x,y,z){ var p = math.round((x - y) / z)-halfsize; return p; }, cdcreate = function(a,b,c,d,e,f){ var bgpos = a+b+'px '+c+d+'px', o = { backgroundposition: bgpos, left: e, top: f }; return o; }; // mouse move event ele.mousemove(function (e) { if(zoomystate[zoom.attr('rel')] === 1){ var posx = mousepos(e.pagex,l.left), posy = mousepos(e.pagey,l.top), leftx = zoompos(e.pagex,l.left,ratiox), topy = zoompos(e.pagey,l.top,ratioy), arrposb = [ ['-', leftx,'-',topy,posx,posy], ['',0,'-',topy,-stop,posy], ['',0,'',0,-stop,-stop], ['',0,'-',zoomy,-stop,bottomstop], ['-',leftx,'',0,posx,-stop], ['-',zoomx,'',0,rightstop,-stop], ['-',zoomx,'-',topy,rightstop,posy], ['-',zoomx,'-',zoomy,rightstop,bottomstop], ['-',leftx,'-',zoomy,posx,bottomstop] ], cssarrofobj = function(){ var ar = []; for ( i=0; i < arrposb.length; i++) { var ap = arrposb[i], posb = cdcreate(ap[0],ap[1],ap[2],ap[3],ap[4],ap[5]); ar.push(posb); } return ar; }, a = -stop <= posx, e2 = -stop > posx, b = -stop <= posy, f = -stop > posy, d = bottomstop > posy, g = bottomstop <= posy, c = rightstop > posx, j = rightstop <= posx, cssarrindex = ( a && b && c && d ) ? 0 : ( e2 ) ? ( b && d ) ? 1 : ( f ) ? 2 : ( g ) ? 3 : null : ( f ) ? (c) ? 4 : 5 : ( j ) ? ( d ) ? 6 : 7 : ( g ) ? 8 : null; zoom.show().css( cssarrofobj()[ cssarrindex ] || {} ); } }); }, // load zoom image loadimage = function(ele, image, zoom) { var y = ele.children('img').height(), x = ele.children('img').width(), zs = options.zoomsize / 2; //move the zoomy out of the screen view while loading img zoom.show('').css({top:'-999999px',left:'-999999px'}); if (zoom.find('img').attr('src') !== image) { zoom.find('img').attr('src', image).load(function(){ ele.attr({ 'x': zoom.find('img').width(), 'y': zoom.find('img').height() }); if (options.glare) { zoom.html('').css({ 'background-image': 'url(' + image + ')' }); settimeout(function () { setglare(zoom); }, 100); } else { zoom.html('').css({ 'background-image': 'url(' + image + ')' }); } }).each(function(){ if(this.complete || (jquery.browser.msie && parseint(jquery.browser.version, 10) === 6)){ $(this).trigger("load"); } }); } }, resetzoom = function(ele, zoom, x , y) { var img = ele.children('img'); var mid = options.zoomsize/2; if(!x){x=0;} if(!y){y=0;} zoom.css({ left: x-mid+'px', top: y-mid+'px' }).parent('a').css({ height: img.height(), width: img.width() }); }, zoomparams = function(ele, zoom) { var img = ele.children('img'), margin = img.css('margin-left'), namepick = function(img){ var f = img.css('float'); if(f){ if(f === 'none'){ var inline = img.attr('style'); if(inline){ var incss = inline.split(';'); for(i = 0; i<= incss.length; i++){ if(incss[i]) var style = incss[i].split(':'); else var style = [0,0]; if(style[0]==='float'){ return(style[1]); } } }else{ return f; } }else{ return f; } }else{ if(img.parent('*').css('text-align') === 'center'){ return 'center'; }else{ return 'unknown'; } } } zoom.css({ height: options.zoomsize, width: options.zoomsize }).css( getborderradiuscssobj() ); if( !options.glare ){ zoom.children('span').css({ height: options.zoomsize - 10, width: options.zoomsize - 10 }); } if(margin === undefined || margin === ''){margin = '5px';} var cssobj = { 'left':[{ 'margin': margin, 'float': 'left' }], 'right':[{ 'margin': margin, 'float': 'right' }], 'center':[{ 'margin': margin+' auto', 'display': 'block' }], 'unknown' : [{ 'margin' : margin, 'display': 'block' }], 'none' : [{ 'margin': margin, 'display': 'block' }] }, cssnamepick = namepick(img); img.css('margin', '0px'); ele.css( cssobj[ cssnamepick ][0]); img.one("load",function(){ ele.css({ 'display': 'block', height: img.height(), width: img.width(), 'cursor': 'normal' }); }).each(function(){ if(this.complete || (jquery.browser.msie && parseint(jquery.browser.version, 10) === 6)){ $(this).trigger("load"); } }); }, getborderradiuscssobj = function(x){ if( !options.round ){ return ""; }else{ var cssobj = {}; if(x === undefined){ cssobj['-webkit-border-radius'] = cssobj['-moz-border-radius'] = cssobj[ 'border-radius' ] = options.zoomsize / 2 + 'px'; }else{ cssobj['-webkit-border-radius'] = cssobj['-moz-border-radius'] = cssobj[ 'border-radius' ] = options.zoomsize / 2 + 'px '+options.zoomsize / 2 + 'px 0px 0px'; } if(jquery.browser.msie && parseint(jquery.browser.version, 10) === 9){$('.zoomy').find('span').css('margin', '0');} return cssobj; } }, setglare = function(zoom) { zoom.children('span').css({ height: options.zoomsize/2, width: options.zoomsize - 10 }).css( getborderradiuscssobj(0) ); }; $(this).each(function() { addzoomy($(this), zoomystate.length); }); }; }(jquery));