// zoomio jquery in-place image zoom script
// by dynamic drive: http://www.dynamicdrive.com
;(function($){
var defaults = {fadeduration:500}
var $zoomiocontainer
var currentzoominfo = { $zoomimage:null, offset:[,], settings:null, multiplier:[,] }
var ismobile = navigator.useragent.match(/(ipad)|(iphone)|(ipod)|(android)|(webos)/i) != null //boolean check for popular mobile browsers
function getdimensions($target){
return {w:$target.width(), h:$target.height()}
}
function getoffset(what, offsettype){ // custom get element offset from document (since jquery version is whack in mobile browsers
return (what.offsetparent)? what[offsettype]+getoffset(what.offsetparent, offsettype) : what[offsettype]
}
function zoomio($img, settings){ // zoomio plugin function
var s = settings || defaults
var trigger = ismobile? 'touchstart' : 'mouseenter'
$img.off('touchstart mouseenter').on(trigger, function(e){ // on 'touchstart' or 'mouseenter'
var jqueryevt = e // remember jquery event object (for use to call e.stoppropagation())
var e = jqueryevt.originalevent.changedtouches? jqueryevt.originalevent.changedtouches[0] : jqueryevt
var offset = {left:getoffset($img.get(0), 'offsetleft'), top:getoffset($img.get(0), 'offsettop') }
var mousecoord = [e.pagex - offset.left, e.pagey - offset.top]
var $zoomimage
var zoomdfd = $.deferred()
var imgdimensions = {imgw:null, imgh:null, zoomimgw:null, zoomimgh:null}
$zoomiocontainer.html( '' ) // add image inside zoom container
$zoomimage = $zoomiocontainer.find('img')
if ($zoomimage.get(0).complete){
zoomdfd.resolve()
}
else{
$zoomimage.on('load', function(){
zoomdfd.resolve()
})
}
zoomdfd.done(function(){
var imgdimensions = getdimensions($img)
var containerwidth = s.w || imgdimensions.w
var containerheight = s.h || imgdimensions.h
$zoomiocontainer.css({width:containerwidth, height:containerheight, left:offset.left, top:offset.top}) // set zoom container dimensions and position
var zoomiocontainerdimensions = getdimensions($zoomiocontainer)
var zoomimgdimensions = getdimensions($zoomimage)
$zoomiocontainer.stop().css({visibility:'visible', opacity:0}).animate({opacity:1}, s.fadeduration) // fade zoom container into view
if (ismobile){ // scroll to point where user tapped on
var scrollleftpos = (mousecoord[0] / imgdimensions.w) * (zoomimgdimensions.w - zoomiocontainerdimensions.w)
var scrolltoppos = (mousecoord[1] / imgdimensions.h) * (zoomimgdimensions.h - zoomiocontainerdimensions.h)
$zoomiocontainer.scrollleft( scrollleftpos )
$zoomiocontainer.scrolltop( scrolltoppos )
}
currentzoominfo = {$zoomimage:$zoomimage, offset:offset, settings:s, multiplier:[zoomimgdimensions.w/zoomiocontainerdimensions.w, zoomimgdimensions.h/zoomiocontainerdimensions.h]}
})
jqueryevt.stoppropagation() // stoppropagation() works on jquery evt object (versus jqueryevt.originalevent.changedtouches[0]
})
}
$.fn.zoomio = function(options){ // set up jquery zoomio plugin
var s = $.extend({}, defaults, options)
return this.each(function(){ //return jquery obj
var $target = $(this)
$target = ($target.is('img'))? $target : $target.find('img:eq(0)')
if ($target.length == 0){
return true
}
zoomio($target, s)
}) // end return this.each
}
$(function(){ // on dom load
$zoomiocontainer = $('