+ Hover
+
+ Hover
+ + +
+ Grab
+ + +
+ Click to activate
+ + +
+ Click to toggle
+ + + diff --git a/asset/vendor/zoom/grab.cur b/asset/vendor/zoom/grab.cur new file mode 100644 index 0000000..fba3ddc Binary files /dev/null and b/asset/vendor/zoom/grab.cur differ diff --git a/asset/vendor/zoom/grabbed.cur b/asset/vendor/zoom/grabbed.cur new file mode 100644 index 0000000..41aaa62 Binary files /dev/null and b/asset/vendor/zoom/grabbed.cur differ diff --git a/asset/vendor/zoom/icon.png b/asset/vendor/zoom/icon.png new file mode 100644 index 0000000..ecac94a Binary files /dev/null and b/asset/vendor/zoom/icon.png differ diff --git a/asset/vendor/zoom/jquery.zoom.js b/asset/vendor/zoom/jquery.zoom.js new file mode 100644 index 0000000..653eb49 --- /dev/null +++ b/asset/vendor/zoom/jquery.zoom.js @@ -0,0 +1,236 @@ +/*! + Zoom 1.7.21 + 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.setAttribute('role', 'presentation'); + img.alt = ''; + img.src = settings.url; + }); + }; + + $.fn.zoom.defaults = defaults; +}(window.jQuery)); diff --git a/asset/vendor/zoom/jquery.zoom.min.js b/asset/vendor/zoom/jquery.zoom.min.js new file mode 100644 index 0000000..017c6ee --- /dev/null +++ b/asset/vendor/zoom/jquery.zoom.min.js @@ -0,0 +1,6 @@ +/*! + Zoom 1.7.21 + license: MIT + http://www.jacklmoore.com/zoom +*/ +(function(o){var t={url:!1,callback:!1,target:!1,duration:120,on:"mouseover",touch:!0,onZoomIn:!1,onZoomOut:!1,magnify:1};o.zoom=function(t,n,e,i){var u,c,a,r,m,l,s,f=o(t),h=f.css("position"),d=o(n);return t.style.position=/(absolute|fixed)/.test(h)?h:"relative",t.style.overflow="hidden",e.style.width=e.style.height="",o(e).addClass("zoomImg").css({position:"absolute",top:0,left:0,opacity:0,width:e.width*i,height:e.height*i,border:"none",maxWidth:"none",maxHeight:"none"}).appendTo(t),{init:function(){c=f.outerWidth(),u=f.outerHeight(),n===t?(r=c,a=u):(r=d.outerWidth(),a=d.outerHeight()),m=(e.width-c)/r,l=(e.height-u)/a,s=d.offset()},move:function(o){var t=o.pageX-s.left,n=o.pageY-s.top;n=Math.max(Math.min(n,a),0),t=Math.max(Math.min(t,r),0),e.style.left=t*-m+"px",e.style.top=n*-l+"px"}}},o.fn.zoom=function(n){return this.each(function(){var e=o.extend({},t,n||{}),i=e.target&&o(e.target)[0]||this,u=this,c=o(u),a=document.createElement("img"),r=o(a),m="mousemove.zoom",l=!1,s=!1;if(!e.url){var f=u.querySelector("img");if(f&&(e.url=f.getAttribute("data-src")||f.currentSrc||f.src),!e.url)return}c.one("zoom.destroy",function(o,t){c.off(".zoom"),i.style.position=o,i.style.overflow=t,a.onload=null,r.remove()}.bind(this,i.style.position,i.style.overflow)),a.onload=function(){function t(t){f.init(),f.move(t),r.stop().fadeTo(o.support.opacity?e.duration:0,1,o.isFunction(e.onZoomIn)?e.onZoomIn.call(a):!1)}function n(){r.stop().fadeTo(e.duration,0,o.isFunction(e.onZoomOut)?e.onZoomOut.call(a):!1)}var f=o.zoom(i,u,a,e.magnify);"grab"===e.on?c.on("mousedown.zoom",function(e){1===e.which&&(o(document).one("mouseup.zoom",function(){n(),o(document).off(m,f.move)}),t(e),o(document).on(m,f.move),e.preventDefault())}):"click"===e.on?c.on("click.zoom",function(e){return l?void 0:(l=!0,t(e),o(document).on(m,f.move),o(document).one("click.zoom",function(){n(),l=!1,o(document).off(m,f.move)}),!1)}):"toggle"===e.on?c.on("click.zoom",function(o){l?n():t(o),l=!l}):"mouseover"===e.on&&(f.init(),c.on("mouseenter.zoom",t).on("mouseleave.zoom",n).on(m,f.move)),e.touch&&c.on("touchstart.zoom",function(o){o.preventDefault(),s?(s=!1,n()):(s=!0,t(o.originalEvent.touches[0]||o.originalEvent.changedTouches[0]))}).on("touchmove.zoom",function(o){o.preventDefault(),f.move(o.originalEvent.touches[0]||o.originalEvent.changedTouches[0])}).on("touchend.zoom",function(o){o.preventDefault(),s&&(s=!1,n())}),o.isFunction(e.callback)&&e.callback.call(a)},a.setAttribute("role","presentation"),a.alt="",a.src=e.url})},o.fn.zoom.defaults=t})(window.jQuery); \ No newline at end of file diff --git a/asset/vendor/zoom/package.json b/asset/vendor/zoom/package.json new file mode 100644 index 0000000..0141eb2 --- /dev/null +++ b/asset/vendor/zoom/package.json @@ -0,0 +1,27 @@ +{ + "name": "jquery-zoom", + "description": "Enlarge images on click or mouseover.", + "version": "1.7.21", + "keywords": [ + "zoom", + "images", + "ui", + "jquery-plugin" + ], + "author": { + "name": "Jack Moore", + "url": "http://www.jacklmoore.com", + "email": "hello@jacklmoore.com" + }, + "main": "jquery.zoom.js", + "license": "MIT", + "homepage": "http://www.jacklmoore.com/zoom", + "demo": "http://www.jacklmoore.com/zoom", + "repository": { + "type": "git", + "url": "http://github.com/jackmoore/zoom.git" + }, + "dependencies": { + "jquery": ">=1.7" + } +} diff --git a/asset/vendor/zoom/readme.md b/asset/vendor/zoom/readme.md new file mode 100644 index 0000000..c93dcf1 --- /dev/null +++ b/asset/vendor/zoom/readme.md @@ -0,0 +1,101 @@ +## About Zoom + +A small jQuery plugin for zooming images on mouseover or mousedown. See the [project page](http://jacklmoore.com/zoom/) for documentation and a demonstration. Released under the [MIT license](http://www.opensource.org/licenses/mit-license.php). + +To compile the .min.js file, run: `uglifyjs --comments '/license:/' < jquery.zoom.js > jquery.zoom.min.js` + +## Changelog: + +##### v1.7.21 - 2018/4/26 +* Added empty alt attribute. Resolves #134 + +##### v1.7.20 - 2017/4/25 +* Replaced alt and aria-hidden with role attribute. Resolves #121 + +##### v1.7.19 - 2017/4/20 +* Added alt and aria-hidden attributes to the zoom layer img element. Merged #121 + +##### v1.7.18 - 2016/9/9 +* Fixed regression from 1.7.16 that occurred when the target option was passed a selector. Fixes #113 + +##### v1.7.17 - 2016/9/7 +* Detect src using element.currentSrc to support srcset. Fixes #82 + +##### v1.7.16 - 2016/9/7 +* Cancelled the onload event when calling destroy. Fixes #83 + +##### v1.7.15 - 2016/2/8 +* Added touchend event, might fix #97 #75 #62. Merges #100. + +##### v1.7.14 - 2015/3/18 +* Fixes bug with passing the `target` property a selector, rather than a DOM node. Merges #73. + +##### v1.7.13 - 2014/4/29 +* Destroy event does a better job of reseting back to the original state. + +##### v1.7.12 - 2014/2/11 +* Set zoomed image's maxHeight to none, just in case a maxHeight has been defined for images in the CSS. + +##### v1.7.11 - 2013/11/12 +* Added magnify property to allow scaling of the zoomed image. + +##### v1.7.10 - 2013/10/16 +* Fixed bug relating to the size of the target element when using the target property (Fixes #35) + +##### v1.7.9 - 2013/10/16 +* Added simple fallback for touch events (Fixes #37 #39) +* Renamed minified file to jquery.zoom.min.js to match jQuery's convention. + +##### v1.7.8 - 2013/7/30 +* Will use data-src attribute if present before checking for the presence of an src attribute. + +##### v1.7.7 - 2013/7/14 +* Restricted grab to just the left-mouse-button on mousedown + +##### v1.7.6 - 2013/6/24 +* Fixed misnamed onZoomOut callback + +##### v1.7.5 - 2013/6/19 +* Fixed a bug with absolutely or fixed position target elements +* Set the value of `this` to be zoom-image element for the onZoomIn and onZoomOut callbacks + +##### v1.7.4 - 2013/6/18 +* Namespaced events to assist unbinding events. +* Added destroy event to unbind zoom events & remove created img element. Example: + $('.example').trigger('zoom.destroy'); +* Added onZoomIn and onZoomOut callbacks + +##### v1.7.3 - 2013/6/10 +* Fixing mistake made in previous commit + +##### v1.7.2 - 2013/6/6 +* Replaced new Image() with document.createElement('img') to avoid a potential bug in Chrome 27. + +##### v1.7.1 - 2013/3/12 +* Replaced jQuery shorthand methods with on() in anticipation of jQuery 2.0 + +##### v1.7.0 - 2013/1/31 +* Added 'toggle' behavior to zoom in/out on click. Example: $('#example').zoom({ on:'toggle' }); +* Removed the icon property in favor of just using CSS. + +##### v1.6.0 - 2013/1/22 +* Created $.zoom which contains the positioning logic, so that users can write custom controls or event handling. + +##### v1.5.0 - 2012/11/19 +* Added 'target' property for specifying the element that displays the zoomed image. + +##### v1.4.0 - 2012/9/29 +* Changed API & added option to activate on click. + +##### v1.3.0 - 2011/12/21 +* Added 'callback' property that will execute a callback function once the image has loaded. +* Fixed a bug relating to the 'grab' property + +##### v1.2.0 - 2011/11/15 +* Fixed a positioning bug + +##### v1.1.0 - 2011/11/15 +* Added 'grab' property + +##### v1.0.0 - 2011/11/11 +* First release \ No newline at end of file diff --git a/asset/vendor/zoom/roxy.jpg b/asset/vendor/zoom/roxy.jpg new file mode 100644 index 0000000..11c2a8a Binary files /dev/null and b/asset/vendor/zoom/roxy.jpg differ diff --git a/view/common/block-layout/imageViewer.phtml b/view/common/block-layout/imageViewer.phtml index 6476c1e..83c5a53 100644 --- a/view/common/block-layout/imageViewer.phtml +++ b/view/common/block-layout/imageViewer.phtml @@ -1,7 +1,11 @@ headScript()->appendFile($this->assetUrl('vendor/wheelzoom/wheelzoom.js', + //$this->headScript()->appendFile($this->assetUrl('vendor/wheelzoom/wheelzoom.js', + // 'ImageViewer')); + $this->headScript()->appendFile($this->assetUrl('vendor/zoom/jquery.zoom.min.js', + 'ImageViewer')); + $this->headLink()->appendStylesheet($this->assetUrl('css/zoom.css', 'ImageViewer')); } ?> @@ -18,6 +22,7 @@