(function($){ EYE.extend({ zoomimage: { libs: {}, types: /\.jpg|\.jpeg|\.png|\.gif|\.bmp/g, current: null, moved: false, pointer: {x:0,y:0}, diff: {x:0, y:0}, trackKey: false, defaults: { opacity: 0.3, border: 0, shadow: 0, duration: 200, prevent: 25, controls: false, caption: false, hideSource: true, centered: false, className: false, onLoad: function(){return false}, beforeZoomIn: function(){return false}, onZoomIn: function(){return false}, beforeZoomOut: function(){return false}, onZoomOut: function(){return false}, onFocus: function(){return false}, controlsTrigger: 'click', easing: 'linear', preload: 'click'
}, template: [ '<div class="zoomimage">', '<img src="" />', '<br /><div class="zoomclose">close</div>', '<div class="zoomimage_caption"></div>', '<div class="zoomimage_loading"></div>', '</div>' ], click: function(e) { var el = this; el.blur(); if (el.zoomimageCfg.loading === true) { return false;}
if (el.zoomimageCfg.zoomed == false) { EYE.zoomimage.zoomIn(el);} else { EYE.zoomimage.zoomOut(el, false);}
return false;}, zoomIn: function(el) { if (el.zoomimageCfg.loaded === false) { if (el.zoomimageCfg.loading != true) { el.zoomimageCfg.loading = true; EYE.zoomimage.preload(el);}
return;}
if (el.zoomimageCfg.zoomed == true) { EYE.zoomimage.focus(el); return;}
el.zoomimageCfg.beforeZoomIn.apply(el,[el.zoomimageCfg.box]); var elPos = EYE.getPosition(el, true); var elHeight = el.offsetHeight; var elWidth = el.offsetWidth; var pos = EYE.getScroll(); var borderAndShadow = el.zoomimageCfg.border + el.zoomimageCfg.shadow; var width = el.zoomimageCfg.width + borderAndShadow * 2; var height = el.zoomimageCfg.height + borderAndShadow * 2; var screenRatio = pos.iw/pos.ih; var imageRatio = el.zoomimageCfg.width/el.zoomimageCfg.height; if (screenRatio > imageRatio) { if (height > pos.ih) { height = pos.ih; width = parseInt(height * imageRatio,10);}
} else if (width > pos.iw) { width = pos.iw; height = parseInt(width / imageRatio, 10);}
var top = el.zoomimageCfg.centered ?
pos.t + parseInt((pos.ih - height)/2, 10)
:
Math.min( Math.max( pos.t, elPos.y + (elHeight - height)/2 - borderAndShadow ), pos.t + pos.ih - height ); var left = el.zoomimageCfg.centered ?
pos.l + parseInt((pos.iw - width)/2, 10)
:
Math.min( Math.max( pos.l, elPos.x + (elWidth - width)/2 - borderAndShadow ), pos.l + pos.iw - width ); var imgWidth = width - borderAndShadow * 2; var imgHeight = height - borderAndShadow * 2; if(el.zoomimageCfg.hideSource === true) { el.style.visibility = 'hidden';}
$('#' + el.zoomimageCfg.box)
.css({ top: elPos.y + 'px', left: elPos.x + 'px', width: elWidth + 'px', height: elHeight + 'px'
})
.find('>div')
.hide()
.end()
.find('img')
.attr('src', el.zoomimageCfg.src)
.css({ top: 0, left: 0, width: '100%', height: '100%', display: 'block', borderWidth: '0px'
})
.end()
.animate({ width: imgWidth, height: imgHeight, top: top + borderAndShadow, left: left + borderAndShadow
}, el.zoomimageCfg.duration, el.zoomimageCfg.easing, function(){ $(this)
.css({ top: top + 'px', left: left + 'px', width: width + 'px', height: height + 'px'
})
.find('img')
.css({ top: el.zoomimageCfg.shadow + 'px', left: el.zoomimageCfg.shadow + 'px', width: imgWidth + 'px', height: imgHeight + 'px', borderWidth: el.zoomimageCfg.border + 'px'
})
.end()
.find('>div:first')
.find('div.zoomimage_sc')
.css('height', height - el.zoomimageCfg.shadow*2 + 'px')
.end()
.show(); el.zoomimageCfg.zoomed = true; EYE.zoomimage.focus(el); el.zoomimageCfg.onZoomIn.apply(el,[el.zoomimageCfg.box]);});}, showControls: function(el) { if(el == undefined)
return; if (el.zoomimageCfg == undefined) { el = $('#' + $(el).attr('zoomimage')).get(0);}
var height, imgWidth, borderAndShadow = el.zoomimageCfg.border + el.zoomimageCfg.shadow; $('#' + el.zoomimageCfg.box)
.find('img')
.each(function(){ imgWidth = parseInt($.curCSS(this, 'width'),10);})
.end()
.get(0).zoomimageControls = true; if(el.zoomimageCfg.caption) { $('#' + el.zoomimageCfg.box)
.find('>div:eq(2)')
.stop()
.css({ bottom: borderAndShadow + 'px', left: borderAndShadow + 'px', width: imgWidth + 'px'
})
.show()
.each(function() { this.style.height = 'auto'; height = this.offsetHeight; this.style.height = '0';})
.animate({height: height}, el.zoomimageCfg.duration);}
if(el.zoomimageCfg.controls) { if (EYE.zoomimage.libs[el.zoomimageCfg.lib] > 1) { $('#' + el.zoomimageCfg.box)
.find('>div:eq(1)')
.show()
.each(function(){ if (!el.zoomimageCfg.controlsHeight) { el.zoomimageCfg.controlsHeight = this.offsetHeight;}
this.style.height = '0';})
.css({ top: borderAndShadow + 'px', left: borderAndShadow + 'px', width: imgWidth + 'px'
})
.animate({height: el.zoomimageCfg.controlsHeight}, el.zoomimageCfg.duration);}
}
}, zoomOut: function(el, goToNext) { var boxEl, elPos, borderAndShadow, elSize; if (el.zoomimageCfg) { if (el.zoomimageCfg.zoomed === false) { return;}
el.zoomimageCfg.beforeZoomOut.apply(el,[el.zoomimageCfg.box]); boxEl = document.getElementById(el.zoomimageCfg.box);} else { boxEl = el; el = $('a[href=' + $('img',boxEl).attr('src') + ']').get(0);}
if (el) { elPos = EYE.getPosition(el, true); el.zoomimageCfg.zoomed = false; borderAndShadow = el.zoomimageCfg.border + el.zoomimageCfg.shadow; elSize = { width: el.offsetWidth, height: el.offsetHeight
};} else { borderAndShadow = EYE.zoomimage.defaults.border + EYE.zoomimage.defaults.shadow; elSize = { width: 0, height: 0
}; elPos = EYE.getPosition(boxEl, true); elPos.y += parseInt(boxEl.offsetHeight/2, 10); elPos.x += parseInt(boxEl.offsetWidth/2, 10);}
$(boxEl)
.css({ top: boxEl.offsetTop + borderAndShadow + 'px', left: boxEl.offsetLeft + borderAndShadow + 'px', width: boxEl.offsetWidth - borderAndShadow*2 + 'px', height: boxEl.offsetHeight - borderAndShadow*2 + 'px'
})
.find('>div')
.stop()
.hide()
.end()
.find('img')
.css({ top: 0, left: 0, width: '100%', height: '100%', borderWidth: '0px'
})
.end()
.animate( { top: elPos.y + 'px', left: elPos.x + 'px', width: elSize.width + 'px', height: elSize.height + 'px'
}, el ? el.zoomimageCfg.duration : EYE.zoomimage.defaults.duration, el.zoomimageCfg.easing, function() { EYE.zoomimage.blur(); $(this).hide(); if (el) { if(el.zoomimageCfg.hideSource === true) { el.style.visibility = 'visible';}
el.zoomimageCfg.onZoomOut.apply(el,[el.zoomimageCfg.box]); if (!goToNext) { EYE.zoomimage.focus($('div.zoomimage:visible:last').not(':animated').get(0));}
} else { $(boxEl).stop().remove();}
} );}, mouseOver: function(e) { var triggerEl = document.getElementById($(this).attr('zoomimage')); if (triggerEl.zoomimageCfg.zoomed === true && this.zoomimageControls == false) { EYE.zoomimage.showControls(triggerEl);}
return false;}, mouseOut: function(e) { if ( !EYE.isChildOf(this, e.relatedTarget, this) ) { $(this)
.find('>div:not(:first)')
.stop()
.hide(); this.zoomimageControls = false;}
return false;}, mouseDown: function(e) { var triggerEl = document.getElementById($(this).attr('zoomimage')); if (triggerEl) { $.extend(EYE.zoomimage,{ current: this, prevent: triggerEl.zoomimageCfg.prevent, moved: false, diff: { x: e.pageX - this.offsetLeft, y: e.pageY - this.offsetTop
}, pointer: { x: e.pageX , y: e.pageY
}
}); $(document)
.bind('mousemove', EYE.zoomimage.mouseMove)
.bind('mouseup', EYE.zoomimage.mouseUp);} else { $(this).zoomimageClear();}
return false;}, mouseMove: function(e) { var diffX = Math.abs(EYE.zoomimage.pointer.x - e.pageX); var diffY = Math.abs(EYE.zoomimage.pointer.y - e.pageY); if (EYE.zoomimage.moved === false) { if ( diffX > EYE.zoomimage.prevent|| diffY > EYE.zoomimage.prevent) { EYE.zoomimage.moved = true; $(EYE.zoomimage.current).addClass('zoomimage_move'); if (!$(EYE.zoomimage.current).is('.zoomimage_focused')) { EYE.zoomimage.focus(EYE.zoomimage.current);}
}
} else { EYE.zoomimage.current.style.top = e.pageY - EYE.zoomimage.diff.y + 'px'; EYE.zoomimage.current.style.left = e.pageX - EYE.zoomimage.diff.x + 'px';}
return false;}, mouseUp: function (e) { $(EYE.zoomimage.current).removeClass('zoomimage_move'); EYE.zoomimage.current = null; $(document)
.unbind('mousemove', EYE.zoomimage.mouseMove)
.unbind('mouseup', EYE.zoomimage.mouseUp); return false;}, imageClick: function(e) { $(document)
.unbind('mousemove', EYE.zoomimage.mouseMove)
.unbind('mouseup', EYE.zoomimage.mouseUp); var el = document.getElementById($(this).attr('zoomimage')); if (el) { if (EYE.zoomimage.moved === false && $(this).is('.zoomimage_focused')) { if ($(e.target).is('a')) { EYE.zoomimage.zoomNext(el, e.target.className == 'zoomimage_next' ? 1 : -1); var goToNext = true;} else { EYE.zoomimage.zoomOut(el, goToNext||false);}
} else if(!$(this).is('.zoomimage_focused')) { EYE.zoomimage.focus(this);}
} else { $(this).zoomimageClear();}
return false;}, clear: function() { var subject = this; if (subject.size() == 0) { subject = $('div.zoomimage');}
return subject.each(function(){ var triggerEl = document.getElementById($(this).attr('zoomimage')); if (triggerEl) { EYE.zoomimage.zoomOut(triggerEl, false);} else { EYE.zoomimage.zoomOut(this, false);}
});}, zoomNext: function(el, dir) { if(el.zoomimageCfg.zoomed === false) { return;}
EYE.zoomimage.zoomOut(el, true); var nextImg = el.zoomimageCfg.iteration + dir; var lib = $(el).attr('zoomimage'); var maxImg = EYE.zoomimage.libs[lib]; if (nextImg < 0) { nextImg = maxImg - 1;} else if (nextImg >= maxImg) { nextImg = 0;}
EYE.zoomimage.zoomIn($('a[zoomimage="' + lib + '"]').get(nextImg));}, keyPressed: function(e) { var el = $('div.zoomimage_focused'); if (el.size() == 1) { var pressedKey = e.charCode || e.keyCode || -1; el = $('#' + $(el).attr('zoomimage')).get(0); var lib = $(el).attr('zoomimage'); switch (pressedKey)
{ case 35:
if (EYE.zoomimage.libs[lib] > 1 && EYE.zoomimage.libs[lib] - 1 != el.zoomimageCfg.iteration) { EYE.zoomimage.zoomNext(el, EYE.zoomimage.libs[lib] - el.zoomimageCfg.iteration - 1); return false;}
break; case 36:
if (EYE.zoomimage.libs[lib] > 1 && el.zoomimageCfg.iteration != 0) { EYE.zoomimage.zoomNext(el, - el.zoomimageCfg.iteration); return false;}
break; case 40:
case 37:
case 8:
case 33:
case 80:
case 112:
if (EYE.zoomimage.libs[lib] > 1) { EYE.zoomimage.zoomNext(el, -1); return false;}
break; case 38:
case 39:
case 34:
case 32:
case 110:
case 78:
if (EYE.zoomimage.libs[lib] > 1) { EYE.zoomimage.zoomNext(el, 1); return false;}
break; case 27:
EYE.zoomimage.zoomOut(el, false); return false; break;}
}
}, focus: function(el) { if(el == undefined)
return; if (el.zoomimageCfg == undefined) { el = $('#' + $(el).attr('zoomimage')).get(0);} else { var showControls = true;}
EYE.zoomimage.blur(el); $('#' + el.zoomimageCfg.box)
.not('.zoomimage_focused')
.addClass('zoomimage_focused'); el.zoomimageCfg.onFocus.apply(el,[el.zoomimageCfg.box]); if (el.zoomimageCfg.controlsTrigger == 'focus' || showControls) { EYE.zoomimage.showControls(el);}
}, blur: function(el) { $('div.zoomimage_focused')
.not('#' + (el == undefined ? 'fakezoomimage' : el.zoomimageCfg.box))
.removeClass('zoomimage_focused')
.each(function(){ this.zoomimageControls = false;})
.find('>div:not(:first)')
.stop()
.hide();}, preload: function(el) { var boxEl = $('#' + el.zoomimageCfg.box).show(); boxEl.find('>div, img').hide(); var elPos = EYE.getPosition(el, true); boxEl
.find('>div:last')
.show()
.end()
.css({ top: elPos.y + 'px', left: elPos.x + 'px', width: el.offsetWidth + 'px', height: el.offsetHeight + 'px'
}); var preld= new Image(); preld.src = el.href; if (preld.complete) { EYE.zoomimage.markPreloaded(preld, el);} else { preld.onload = function() { EYE.zoomimage.markPreloaded(preld, el);};}
}, markPreloaded: function(preld, el) { $.extend(el.zoomimageCfg,{ loaded: true, width: preld.width, height: preld.height, src: preld.src
}); $('#' + el.zoomimageCfg.box)
.find('div.zoomimage_loading')
.hide(); if (el.zoomimageCfg.loading) { el.zoomimageCfg.loading = false; EYE.zoomimage.zoomIn(el);}
el.zoomimageCfg.onLoad.apply(el,[el.zoomimageCfg.box]);}, init: function(opt) { var libKey = parseInt(Math.random()*2000,10); EYE.zoomimage.libs[libKey] = 0; opt = $.extend({lib:libKey}, EYE.zoomimage.defaults, opt||{}); return this.each(function(){ var jQEl = $(this); var el = this; if (el.href && el.href.toLowerCase().match(EYE.zoomimage.types) != null) { el.zoomimageCfg = $.extend({}, opt, { zoomed: false, loading: false, loaded: false, animated: false, src: el.href, iteration: EYE.zoomimage.libs[libKey], box: 'zoomimage_' + parseInt(Math.random() * 2000, 10) + ''
}); EYE.zoomimage.libs[libKey]++; jQEl
.bind('click', EYE.zoomimage.click)
.attr('zoomimage', libKey)
.attr('zoomimageBox', el.zoomimageCfg.box); var currId = jQEl.attr('id'); if (!currId) { currId = el.zoomimageCfg.box + '_trigger'; jQEl.attr('id', currId);}
var titleAttr = $(el).attr('title'); if (titleAttr == '' || titleAttr == false) { el.zoomimageCfg.caption = false;}
$(EYE.zoomimage.template.join(''))
.attr('id', el.zoomimageCfg.box)
.attr('zoomimage', currId)
.addClass(el.zoomimageCfg.className)
.appendTo(document.body)
.bind('mousedown', EYE.zoomimage.mouseDown)
.bind('click', EYE.zoomimage.imageClick)
.each(function(){ this.zoomimageControls = false; if (el.zoomimageCfg.controlsTrigger != 'focus') { $(this)
.bind('mouseover', EYE.zoomimage.mouseOver)
.bind('mouseout', EYE.zoomimage.mouseOut);}
})
.find('>div')
.not(':first')
.css('opacity', el.zoomimageCfg.opacity)
.end()
.filter('div:eq(2)')
.html('<p>' + titleAttr + '</p>'); if (el.zoomimageCfg.preload == 'load') { EYE.zoomimage.preload(el);}
if (EYE.zoomimage.trackKey === false) { EYE.zoomimage.trackKey = true; $(document).bind('keydown', EYE.zoomimage.keyPressed);}
}
});}
}
}); $.fn.extend({ zoomimage: EYE.zoomimage.init, zoomimageClear: EYE.zoomimage.clear
});})(jQuery);