Skip to content

Commit

Permalink
Release v2.0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@makryl
makryl committed Jun 7, 2016
1 parent 06a1249 commit 2d3fc5e
Show file tree
Hide file tree
Showing 7 changed files with 139 additions and 57 deletions.
8 changes: 5 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

`ABigImage` is jQuery plugin for viewing big versions of images.

Current version **2.0.0** (2016-02-14).
Current version **2.0.1** (2016-06-07).

<div class="colr">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
Expand All @@ -13,8 +13,8 @@ Current version **2.0.0** (2016-02-14).
</form>
</div>

* [abigimage.jquery.js](abigimage.jquery.js) (14.1 kB) [min](abigimage.jquery.min.js) (5.9 kB, gzipped 2.2 kB)
* [abigimage.jquery.css](abigimage.jquery.css) (2.6 kB) [min](abigimage.jquery.min.css) (1.5 kB, gzipped 549 bytes)
* [abigimage.jquery.js](abigimage.jquery.js) (16.2 kB) [min](abigimage.jquery.min.js) (6.7 kB, gzipped 2.5 kB)
* [abigimage.jquery.css](abigimage.jquery.css) (2.6 kB) [min](abigimage.jquery.min.css) (1.5 kB, gzipped 550 bytes)
* Fork at [Github](https://github.com/makryl/ABigImage)

## Features
Expand Down Expand Up @@ -72,6 +72,7 @@ $(function(){
- `slideVelocity` - slide velocity to switch or close image (pixels per millisecond, default: 0.4).
- `zoomMin` - minimal zoom that will hold (default: 1.5).
- `zoomMax` - maximal zoom (default: 5).
- `zoomScrollMultiplier` - how much zoom on mouse scroll (default: 1.25).
- `doubleTapInterval` - zoom double-tap interval (milliseconds, default: 400).
- `prevBtnHtml` - html of "previous" button (default: `&larr;`).
- `closeBtnHtml` - html of "close" button (default: `x`).
Expand Down Expand Up @@ -168,6 +169,7 @@ $.abigimage.unbind($myimgs1);

## Changes

- **2.1.0** - improved zoom positioning, added mouse scroll zoom, fixed prevention of non-plugin's hotkeys.
- **2.0.0** - fixed multiple plugin instances context, added double-tap zoom, optimized touch event handlers, styles moved to CSS file, license changed to MIT.
- **1.3.1** - fixed image caching, added `unbind` method.

Expand Down
166 changes: 122 additions & 44 deletions abigimage.jquery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
prevBtn = $('<div>').addClass('abigimage-prevBtn') .appendTo(layout),
closeBtn = $('<div>').addClass('abigimage-closeBtn') .appendTo(layout),
bottom = $('<div>').addClass('abigimage-bottom') .appendTo(layout),
boxe = box[0];
boxe = box[0],
$w = $(window);

$.fn.abigimage = function(options) {
var plugin = new ABigImage(this, options);
Expand All @@ -33,31 +34,33 @@
};

$.fn.abigimage.defaults = {
fadeIn: 'fast',
fadeOut: 'fast',
slideWidth: .4,
slideVelocity: .4,
zoomMin: 1.5,
zoomMax: 5,
doubleTapInterval: 400,
prevBtnHtml: '&larr;',
closeBtnHtml: 'x',
keyNext: [13 /* enter */, 32 /* space */, 39 /* right */, 40 /* down */],
keyPrev: [8 /* backspace */, 37 /* left */, 38 /* up */],
keyClose: [27 /* escape */, 35 /* end */, 36 /* home */],
onopen: null,
onclose: null
fadeIn: 'fast',
fadeOut: 'fast',
slideWidth: .4,
slideVelocity: .4,
zoomMin: 1.5,
zoomMax: 5,
zoomScrollMultiplier: 1.25,
zoomMoveViewport: 0.9,
doubleTapInterval: 400,
prevBtnHtml: '&larr;',
closeBtnHtml: 'x',
keyNext: [13 /* enter */, 32 /* space */, 39 /* right */, 40 /* down */],
keyPrev: [8 /* backspace */, 37 /* left */, 38 /* up */],
keyClose: [27 /* escape */, 35 /* end */, 36 /* home */],
onopen: null,
onclose: null
};

$.abigimage = {
overlay: overlay,
layout: layout,
prevBtnBox: prevBtnBox,
prevBtn: prevBtn,
closeBtnBox: closeBtnBox,
closeBtn: closeBtn,
box: box,
bottom: bottom,
overlay: overlay,
layout: layout,
prevBtnBox: prevBtnBox,
prevBtn: prevBtn,
closeBtnBox: closeBtnBox,
closeBtn: closeBtn,
box: box,
bottom: bottom,

open: function(src, index, sel) {
((sel && sel._abigimage) || current || last).open(src, index);
Expand Down Expand Up @@ -122,6 +125,9 @@
listen(boxe, 'msTransitionEnd', transitionEnd);
listen(boxe, 'oTransitionEnd', transitionEnd);
listen(boxe, 'transitionend', transitionEnd);

listen(boxe, 'wheel', zoomwheel);
listen(boxe, 'mousemove', zoomwheel);
}

function ABigImage(elements, options) {
Expand Down Expand Up @@ -241,7 +247,10 @@
this.prev();
} else if (this.keyClose.indexOf(keyCode) != -1) {
this.close();
} else {
return false;
}
return true;
};

ABigImage.prototype.nextIndex = function() {
Expand All @@ -266,8 +275,9 @@

function documentKeydown(event) {
if (current) {
prevent(event);
current.key(event.which);
if (current.key(event.which)) {
prevent(event);
}
}
}

Expand All @@ -287,6 +297,10 @@
dy,
iw,
ih,
ww,
wh,
mx,
my,

dstart,
start,
Expand All @@ -312,8 +326,7 @@
width = box.width() * 0.34;
height = box.height();
minD = current.slideWidth * width;
iw = current.img.width();
ih = current.img.height();
initSizes();
}
sx = x;
sy = y;
Expand All @@ -327,19 +340,20 @@
function touchmove(e) {
if (!current) return;

dx = (med(e.touches, 'X') - med(touches, 'X'));
dy = (med(e.touches, 'Y') - med(touches, 'Y'));
x = sx + dx / s;
y = sy + dy / s;
if (e.touches.length > 1) {
s = Math.max(1, ss * (dis(e) / k));
s = ss * (dis(e) / k);
if (s < 1) {
s = 0.333 * s * s * s + 0.666;
}
}
if (s > current.zoomMin) {
var mx = 0.5 * (iw - (iw / s));
var my = 0.5 * (ih - (ih / s));
x = Math.max(-mx, Math.min(mx, x));
y = Math.max(-my, Math.min(my, y));
} else {

dx = (ww - med(touches, 'X')) / ss - (ww - med(e.touches, 'X')) / s;
dy = (wh - med(touches, 'Y')) / ss - (wh - med(e.touches, 'Y')) / s;

x = sx + dx;
y = sy + dy;

if (s <= current.zoomMin && e.touches.length <= 1) {
if (null === vert) {
var dv = Math.abs(dy) - Math.abs(dx);
if (Math.abs(dv) > 2) {
Expand All @@ -362,12 +376,30 @@
var end = (new Date()).getTime();
var time = end - start;

if (!e.touches.length) {
if (e.touches.length) {
sx = x;
sy = y;
ss = s;
dx = 0;
dy = 0;
touches = e.touches;
} else {
if (s <= current.zoomMin) {
if (time <= 1 || (dx >= -1 && dx <= 1 && dy >= -1 && dy <= 1)) {
if (start - dstart <= current.doubleTapInterval) {
s = current.zoomMax;
var tx = med(touches, 'X');
var ty = med(touches, 'Y');
x += (ww - tx) / ss - (ww - tx) / s;
y += (wh - ty) / ss - (wh - ty) / s;

mx = iw - ww / s;
my = ih - wh / s;
x = mx <= 0 ? 0 : Math.max(-mx, Math.min(mx, x));
y = my <= 0 ? 0 : Math.max(-my, Math.min(my, y));

current.box.addClass('abigimage-box-zoom');
slideAnimate(x, y, current.zoomMax, true);
slideAnimate(x, y, s, true);
} else {
slideAnimate(0, 0, 1, true);
}
Expand Down Expand Up @@ -401,11 +433,16 @@
}
}
}
} else if (s > current.zoomMax) {
slideAnimate(x, y, current.zoomMax, true);
} else if (s > current.zoomMin) {
} else {
if (end - dstart <= current.doubleTapInterval) {
slideBack();
} else {
s = Math.max(1, Math.min(current.zoomMax, s));
mx = iw - ww / s;
my = ih - wh / s;
x = mx <= 0 ? 0 : Math.max(-mx, Math.min(mx, x));
y = my <= 0 ? 0 : Math.max(-my, Math.min(my, y));
slideAnimate(x, y, s, true);
}
}
}
Expand All @@ -417,7 +454,7 @@
function med(ts, c) {
var p = 0;
for (var t = 0, l = ts.length; t < l; t++) {
p += ts[t]['page' + c];
p += ts[t]['client' + c];
}
return p / l;
}
Expand All @@ -429,6 +466,13 @@
);
}

function initSizes() {
iw = current.img.width() / 2;
ih = current.img.height() / 2;
ww = $w.width() / 2;
wh = $w.height() / 2;
}

function slideNext() {
slideAnimate(-width, 0, 1, true, function() {
current.next();
Expand Down Expand Up @@ -475,4 +519,38 @@
}
}

function zoomwheel(e) {
if (!current) return;

initSizes();

if (e.deltaY > 0) {
s /= current.zoomScrollMultiplier;
} else if (e.deltaY < 0) {
s *= current.zoomScrollMultiplier;
}
s = Math.max(1, Math.min(current.zoomMax, s));

x = 0;
y = 0;

mx = iw - ww / s;
my = ih - wh / s;

if (mx > 0)
{
x = (ww - e.clientX) / (current.zoomMoveViewport * ww / iw) - (ww - e.clientX) / s;
x = Math.max(-mx, Math.min(mx, x));
}

if (my > 0)
{
y = (wh - e.clientY) / (current.zoomMoveViewport * wh / ih) - (wh - e.clientY) / s;
y = Math.max(-my, Math.min(my, y));
}

slideAnimate(x, y, s, true);
prevent(e);
}

}(jQuery));
2 changes: 1 addition & 1 deletion abigimage.jquery.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 2d3fc5e

Please sign in to comment.