Skip to content
This repository was archived by the owner on Aug 1, 2020. It is now read-only.

Commit e9f4b65

Browse files
author
Fengyuan Chen
committed
Release v0.3.1
1 parent 9a14e49 commit e9f4b65

7 files changed

+83
-40
lines changed

‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
# Changelog
22

33

4+
## 0.3.1 (Dec 28, 2015)
5+
6+
- Supports to zoom from event triggering point.
7+
- Fix a bug of the index of viewing image.
8+
9+
410
## 0.3.0 (Dec 24, 2015)
511

612
- Add 2 new options: "view" and "viewed"

‎dist/viewer.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/*!
2-
* Viewer v0.3.0
2+
* Viewer v0.3.1
33
* https://github.com/fengyuanchen/viewer
44
*
55
* Copyright (c) 2015 Fengyuan Chen
66
* Released under the MIT license
77
*
8-
* Date: 2015-12-24T09:51:21.635Z
8+
* Date: 2015-12-28T03:11:40.827Z
99
*/
1010
.viewer-zoom-in:before,
1111
.viewer-zoom-out:before,

‎dist/viewer.js

+67-30
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/*!
2-
* Viewer v0.3.0
2+
* Viewer v0.3.1
33
* https://github.com/fengyuanchen/viewer
44
*
55
* Copyright (c) 2015 Fengyuan Chen
66
* Released under the MIT license
77
*
8-
* Date: 2015-12-24T09:51:24.343Z
8+
* Date: 2015-12-28T03:12:02.123Z
99
*/
1010

1111
(function (factory) {
@@ -155,6 +155,27 @@
155155
newImage.src = image.src;
156156
}
157157

158+
function getTouchesCenter(touches) {
159+
var length = touches.length;
160+
var pageX = 0;
161+
var pageY = 0;
162+
163+
if (length) {
164+
$.each(touches, function (i, touch) {
165+
pageX += touch.pageX;
166+
pageY += touch.pageY;
167+
});
168+
169+
pageX /= length;
170+
pageY /= length;
171+
}
172+
173+
return {
174+
pageX: pageX,
175+
pageY: pageY
176+
};
177+
}
178+
158179
function Viewer(element, options) {
159180
this.$element = $(element);
160181
this.options = $.extend({}, Viewer.DEFAULTS, $.isPlainObject(options) && options);
@@ -598,12 +619,7 @@
598619
break;
599620

600621
case 'one-to-one':
601-
if (image.ratio === 1) {
602-
this.zoomTo(this.initialImage.ratio);
603-
} else {
604-
this.zoomTo(1);
605-
}
606-
622+
this.toggle();
607623
break;
608624

609625
case 'reset':
@@ -730,7 +746,7 @@
730746
},
731747

732748
wheel: function (event) {
733-
var e = event.originalEvent;
749+
var e = event.originalEvent || event;
734750
var ratio = num(this.options.zoomRatio) || 0.1;
735751
var delta = 1;
736752

@@ -759,7 +775,7 @@
759775
delta = e.detail > 0 ? 1 : -1;
760776
}
761777

762-
this.zoom(-delta * ratio, true);
778+
this.zoom(-delta * ratio, true, event);
763779
},
764780

765781
keydown: function (e) {
@@ -832,12 +848,7 @@
832848
case 49:
833849
if (e.ctrlKey || e.shiftKey) {
834850
e.preventDefault();
835-
836-
if (this.image.ratio === 1) {
837-
this.zoomTo(this.initialImage.ratio);
838-
} else {
839-
this.zoomTo(1);
840-
}
851+
this.toggle();
841852
}
842853

843854
break;
@@ -929,7 +940,7 @@
929940
this.endX = e.pageX || originalEvent && originalEvent.pageX;
930941
this.endY = e.pageY || originalEvent && originalEvent.pageY;
931942

932-
this.change();
943+
this.change(event);
933944
}
934945
},
935946

@@ -972,7 +983,7 @@
972983
$viewer = this.$viewer.removeClass(CLASS_HIDE);
973984

974985
this.$element.one(EVENT_SHOWN, $.proxy(function () {
975-
this.view((this.target ? this.$images.index(this.target) : 0) || this.index);
986+
this.view(this.target ? this.$images.index(this.target) : this.index);
976987
this.target = false;
977988
}, this));
978989

@@ -1009,7 +1020,7 @@
10091020
this.$image.one(EVENT_TRANSITIONEND, $.proxy(function () {
10101021
$viewer.one(EVENT_TRANSITIONEND, $.proxy(this.hidden, this)).removeClass(CLASS_IN);
10111022
}, this));
1012-
this.zoomTo(0, false, true);
1023+
this.zoomTo(0, false, false, true);
10131024
} else {
10141025
$viewer.removeClass(CLASS_IN);
10151026
this.hidden();
@@ -1064,9 +1075,10 @@
10641075
}
10651076

10661077
// Make the image visible if it fails to load within 1s
1067-
this.timeout = setTimeout(function () {
1078+
this.timeout = setTimeout($.proxy(function () {
10681079
$image.removeClass(CLASS_INVISIBLE);
1069-
}, 1000);
1080+
this.timeout = false;
1081+
}, this), 1000);
10701082
}
10711083

10721084
$title.empty();
@@ -1149,8 +1161,9 @@
11491161
*
11501162
* @param {Number} ratio
11511163
* @param {Boolean} hasTooltip (optional)
1164+
* @param {jQuery Event} _event (private)
11521165
*/
1153-
zoom: function (ratio, hasTooltip) {
1166+
zoom: function (ratio, hasTooltip, _event) {
11541167
var image = this.image;
11551168

11561169
ratio = num(ratio);
@@ -1161,25 +1174,29 @@
11611174
ratio = 1 + ratio;
11621175
}
11631176

1164-
this.zoomTo(image.width * ratio / image.naturalWidth, hasTooltip);
1177+
this.zoomTo(image.width * ratio / image.naturalWidth, hasTooltip, _event);
11651178
},
11661179

11671180
/**
11681181
* Zoom the image to an absolute ratio
11691182
*
11701183
* @param {Number} ratio
11711184
* @param {Boolean} hasTooltip (optional)
1185+
* @param {jQuery Event} _event (private)
11721186
* @param {Boolean} _zoomable (private)
11731187
*/
1174-
zoomTo: function (ratio, hasTooltip, _zoomable) {
1188+
zoomTo: function (ratio, hasTooltip, _event, _zoomable) {
11751189
var options = this.options;
11761190
var minZoomRatio = 0.01;
11771191
var maxZoomRatio = 100;
11781192
var image = this.image;
11791193
var width = image.width;
11801194
var height = image.height;
1195+
var originalEvent;
11811196
var newWidth;
11821197
var newHeight;
1198+
var offset;
1199+
var center;
11831200

11841201
ratio = max(0, ratio);
11851202

@@ -1196,8 +1213,28 @@
11961213

11971214
newWidth = image.naturalWidth * ratio;
11981215
newHeight = image.naturalHeight * ratio;
1199-
image.left -= (newWidth - width) / 2;
1200-
image.top -= (newHeight - height) / 2;
1216+
1217+
if (_event && (originalEvent = _event.originalEvent)) {
1218+
offset = this.$viewer.offset();
1219+
center = originalEvent.touches ? getTouchesCenter(originalEvent.touches) : {
1220+
pageX: _event.pageX || originalEvent.pageX || 0,
1221+
pageY: _event.pageY || originalEvent.pageY || 0
1222+
};
1223+
1224+
// Zoom from the triggering point of the event
1225+
image.left -= (newWidth - width) * (
1226+
((center.pageX - offset.left) - image.left) / width
1227+
);
1228+
image.top -= (newHeight - height) * (
1229+
((center.pageY - offset.top) - image.top) / height
1230+
);
1231+
} else {
1232+
1233+
// Zoom from the center of the image
1234+
image.left -= (newWidth - width) / 2;
1235+
image.top -= (newHeight - height) / 2;
1236+
}
1237+
12011238
image.width = newWidth;
12021239
image.height = newHeight;
12031240
image.ratio = ratio;
@@ -1482,9 +1519,9 @@
14821519
// Toggle the image size between its natural size and initial size.
14831520
toggle: function () {
14841521
if (this.image.ratio === 1) {
1485-
this.zoomTo(this.initialImage.ratio);
1522+
this.zoomTo(this.initialImage.ratio, true);
14861523
} else {
1487-
this.zoomTo(1);
1524+
this.zoomTo(1, true);
14881525
}
14891526
},
14901527

@@ -1580,7 +1617,7 @@
15801617
}
15811618
},
15821619

1583-
change: function () {
1620+
change: function (event) {
15841621
var offsetX = this.endX - this.startX;
15851622
var offsetY = this.endY - this.startY;
15861623

@@ -1603,7 +1640,7 @@
16031640
abs(this.startY - this.startY2),
16041641
abs(this.endX - this.endX2),
16051642
abs(this.endY - this.endY2)
1606-
));
1643+
), false, event);
16071644

16081645
this.startX2 = this.endX2;
16091646
this.startY2 = this.endY2;

‎dist/viewer.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/viewer.min.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
</div>
3838
<nav class="collapse navbar-collapse" id="navbar-collapse-1" role="navigation">
3939
<ul class="nav navbar-nav navbar-right">
40-
<li><a href="https://github.com/fengyuanchen/viewer/tree/v0.3.0/README.md">Docs</a></li>
40+
<li><a href="https://github.com/fengyuanchen/viewer/tree/v0.3.1/README.md">Docs</a></li>
4141
<li><a href="https://github.com/fengyuanchen/viewer">GitHub</a></li>
4242
<li><a href="http://chenfengyuan.com">About</a></li>
4343
<li><a href="http://fengyuanchen.github.io">More</a></li>
@@ -49,7 +49,7 @@
4949
<!-- Jumbotron -->
5050
<div class="jumbotron docs-jumbotron">
5151
<div class="container">
52-
<h1>Viewer <small class="version">v0.3.0</small></h1>
52+
<h1>Viewer <small class="version">v0.3.1</small></h1>
5353
<p class="lead">A simple jQuery image viewing plugin.</p>
5454
<div class="docs-carbonads-container">
5555
<div class="docs-carbonads">

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "imageviewer",
33
"description": "A simple jQuery image viewing plugin.",
4-
"version": "0.3.0",
4+
"version": "0.3.1",
55
"main": "dist/viewer.js",
66
"keywords": [
77
"image",

0 commit comments

Comments
 (0)