From 2850df8ce4ce637675b03db078de099a5c4298dc Mon Sep 17 00:00:00 2001 From: Justin Dantzer Date: Wed, 29 Jul 2015 10:32:30 -0400 Subject: [PATCH 1/4] Add lens hover effect to target --- css/easyzoom.css | 16 ++++++++++++++++ src/easyzoom.js | 41 ++++++++++++++++++++++++++++++++++++++++- 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/css/easyzoom.css b/css/easyzoom.css index 56937fa..48f5ca9 100644 --- a/css/easyzoom.css +++ b/css/easyzoom.css @@ -46,6 +46,22 @@ background: #FFF; } +.easyzoom-lens { + position: absolute; + top: 0; + left: 0; + background-color: #FFF; + background-color: rgba(255, 255, 255, 0.35); + border: 1px solid #CCC; + border-color: rgba(0, 0, 0, 0.35); + width: auto; + height: auto; + cursor: pointer; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + /** * EasyZoom layout variations */ diff --git a/src/easyzoom.js b/src/easyzoom.js index 5f93701..4cf8112 100644 --- a/src/easyzoom.js +++ b/src/easyzoom.js @@ -2,7 +2,7 @@ 'use strict'; - var dw, dh, rw, rh, lx, ly; + var dw, dh, rw, rh, lx, ly, lw, lh; var defaults = { @@ -18,6 +18,9 @@ // Prevent clicks on the zoom image link. preventClicks: true, + // Show zoom lens over target image. + showLens: false, + // Callback function to execute when the flyout is displayed. onShow: $.noop, @@ -52,6 +55,7 @@ this.$flyout = $('
'); this.$notice = $('
'); + this.$lens = $('
'); this.$target.on({ 'mousemove.easyzoom touchmove.easyzoom': $.proxy(this._onMove, this), @@ -95,6 +99,16 @@ rw = dw / w1; rh = dh / h1; + if(this.opts.showLens){ + lw = Math.ceil(w1 * (w2 / this.$zoom.width())); + lh = Math.ceil(h1 * (h2 / this.$zoom.height())); + this.$lens.css({ + width: lw, + height: lh + }); + this.$target.append(this.$lens); + } + this.isOpen = true; this.opts.onShow.call(this); @@ -223,6 +237,29 @@ var top = xt * -1; var left = xl * -1; + if(this.opts.showLens){ + var th = this.$target.height(); + var tw = this.$target.width(); + + var lt = Math.max(0, pt - (lh / 2)); + var ll = Math.max(0, pl - (lw / 2)); + + if(pt + (lh / 2) - th > 0){ + lt = th - lh; + } + if(pl + (lw / 2) - tw > 0){ + ll = tw - lw; + } + + this.$lens.css({ + top: Math.ceil(lt), + left: Math.ceil(ll) + }); + + top = Math.ceil(lt * (this.$zoom.height() / th) ) * -1; + left = Math.ceil(ll * (this.$zoom.width() / tw) ) * -1; + } + this.$zoom.css({ top: top, left: left @@ -240,6 +277,7 @@ if (!this.isOpen) return; this.$flyout.detach(); + this.$lens.detach(); this.isOpen = false; this.opts.onHide.call(this); @@ -286,6 +324,7 @@ delete this.$image; delete this.$notice; delete this.$flyout; + delete this.$lens; delete this.isOpen; delete this.isReady; From 2acca40a0e1f5c17dec463a4a9970a6ac2bf8911 Mon Sep 17 00:00:00 2001 From: Justin Dantzer Date: Thu, 3 Sep 2015 22:39:52 -0400 Subject: [PATCH 2/4] CSS adjustments per comments --- css/easyzoom.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/css/easyzoom.css b/css/easyzoom.css index 48f5ca9..ac72964 100644 --- a/css/easyzoom.css +++ b/css/easyzoom.css @@ -48,8 +48,6 @@ .easyzoom-lens { position: absolute; - top: 0; - left: 0; background-color: #FFF; background-color: rgba(255, 255, 255, 0.35); border: 1px solid #CCC; @@ -57,9 +55,7 @@ width: auto; height: auto; cursor: pointer; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; } /** From 16350921dc6adf2d93b52356c9c88df92bcaed9a Mon Sep 17 00:00:00 2001 From: Justin Dantzer Date: Thu, 3 Sep 2015 22:44:13 -0400 Subject: [PATCH 3/4] Reset cursor to crosshair --- css/easyzoom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/easyzoom.css b/css/easyzoom.css index ac72964..883173c 100644 --- a/css/easyzoom.css +++ b/css/easyzoom.css @@ -54,7 +54,7 @@ border-color: rgba(0, 0, 0, 0.35); width: auto; height: auto; - cursor: pointer; + cursor: crosshair; box-sizing: border-box; } From 036ced18913eadc76e32830ef5442df225b840fd Mon Sep 17 00:00:00 2001 From: Justin Date: Mon, 21 Dec 2015 11:06:30 -0500 Subject: [PATCH 4/4] Add html support for notice Changed notice from using .text() to .html() and minor edits to default's comments --- src/easyzoom.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/easyzoom.js b/src/easyzoom.js index 4cf8112..1ee2f02 100644 --- a/src/easyzoom.js +++ b/src/easyzoom.js @@ -102,6 +102,7 @@ if(this.opts.showLens){ lw = Math.ceil(w1 * (w2 / this.$zoom.width())); lh = Math.ceil(h1 * (h2 / this.$zoom.height())); + this.$lens.css({ width: lw, height: lh @@ -198,7 +199,7 @@ this.$target .addClass('is-loading') - .append(this.$notice.text(this.opts.loadingNotice)); + .append(this.$notice.html(this.opts.loadingNotice)); this.$zoom = $(zoom) .on('error', $.proxy(this._onError, this))