/*! zoom 1.7.18 license: mit http://www.jacklmoore.com/zoom */ (function ($) { var defaults = { url: false, callback: false, target: false, duration: 120, on: 'mouseover', // other options: grab, click, toggle touch: true, // enables a touch fallback onzoomin: false, onzoomout: false, magnify: 1 }; // core zoom logic, independent of event listeners. $.zoom = function(target, source, img, magnify) { var targetheight, targetwidth, sourceheight, sourcewidth, xratio, yratio, offset, $target = $(target), position = $target.css('position'), $source = $(source); // the parent element needs positioning so that the zoomed element can be correctly positioned within. target.style.position = /(absolute|fixed)/.test(position) ? position : 'relative'; target.style.overflow = 'hidden'; img.style.width = img.style.height = ''; $(img) .addclass('zoomimg') .css({ position: 'absolute', top: 0, left: 0, opacity: 0, width: img.width * magnify, height: img.height * magnify, border: 'none', maxwidth: 'none', maxheight: 'none' }) .appendto(target); return { init: function() { targetwidth = $target.outerwidth(); targetheight = $target.outerheight(); if (source === target) { sourcewidth = targetwidth; sourceheight = targetheight; } else { sourcewidth = $source.outerwidth(); sourceheight = $source.outerheight(); } xratio = (img.width - targetwidth) / sourcewidth; yratio = (img.height - targetheight) / sourceheight; offset = $source.offset(); }, move: function (e) { var left = (e.pagex - offset.left), top = (e.pagey - offset.top); top = math.max(math.min(top, sourceheight), 0); left = math.max(math.min(left, sourcewidth), 0); img.style.left = (left * -xratio) + 'px'; img.style.top = (top * -yratio) + 'px'; } }; }; $.fn.zoom = function (options) { return this.each(function () { var settings = $.extend({}, defaults, options || {}), //target will display the zoomed image target = settings.target && $(settings.target)[0] || this, //source will provide zoom location info (thumbnail) source = this, $source = $(source), img = document.createelement('img'), $img = $(img), mousemove = 'mousemove.zoom', clicked = false, touched = false; // if a url wasn't specified, look for an image element. if (!settings.url) { var srcelement = source.queryselector('img'); if (srcelement) { settings.url = srcelement.getattribute('data-src') || srcelement.currentsrc || srcelement.src; } if (!settings.url) { return; } } $source.one('zoom.destroy', function(position, overflow){ $source.off(".zoom"); target.style.position = position; target.style.overflow = overflow; img.onload = null; $img.remove(); }.bind(this, target.style.position, target.style.overflow)); img.onload = function () { var zoom = $.zoom(target, source, img, settings.magnify); function start(e) { zoom.init(); zoom.move(e); // skip the fade-in for ie8 and lower since it chokes on fading-in // and changing position based on mousemovement at the same time. $img.stop() .fadeto($.support.opacity ? settings.duration : 0, 1, $.isfunction(settings.onzoomin) ? settings.onzoomin.call(img) : false); } function stop() { $img.stop() .fadeto(settings.duration, 0, $.isfunction(settings.onzoomout) ? settings.onzoomout.call(img) : false); } // mouse events if (settings.on === 'grab') { $source .on('mousedown.zoom', function (e) { if (e.which === 1) { $(document).one('mouseup.zoom', function () { stop(); $(document).off(mousemove, zoom.move); } ); start(e); $(document).on(mousemove, zoom.move); e.preventdefault(); } } ); } else if (settings.on === 'click') { $source.on('click.zoom', function (e) { if (clicked) { // bubble the event up to the document to trigger the unbind. return; } else { clicked = true; start(e); $(document).on(mousemove, zoom.move); $(document).one('click.zoom', function () { stop(); clicked = false; $(document).off(mousemove, zoom.move); } ); return false; } } ); } else if (settings.on === 'toggle') { $source.on('click.zoom', function (e) { if (clicked) { stop(); } else { start(e); } clicked = !clicked; } ); } else if (settings.on === 'mouseover') { zoom.init(); // preemptively call init because ie7 will fire the mousemove handler before the hover handler. $source .on('mouseenter.zoom', start) .on('mouseleave.zoom', stop) .on(mousemove, zoom.move); } // touch fallback if (settings.touch) { $source .on('touchstart.zoom', function (e) { e.preventdefault(); if (touched) { touched = false; stop(); } else { touched = true; start( e.originalevent.touches[0] || e.originalevent.changedtouches[0] ); } }) .on('touchmove.zoom', function (e) { e.preventdefault(); zoom.move( e.originalevent.touches[0] || e.originalevent.changedtouches[0] ); }) .on('touchend.zoom', function (e) { e.preventdefault(); if (touched) { touched = false; stop(); } }); } if ($.isfunction(settings.callback)) { settings.callback.call(img); } }; img.src = settings.url; }); }; $.fn.zoom.defaults = defaults; }(window.jquery));