You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
788 lines
28 KiB
788 lines
28 KiB
/*
|
|
ImageViewer v 1.1.3
|
|
Author: Sudhanshu Yadav
|
|
Copyright (c) 2015-2016 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
|
|
Demo on: http://ignitersworld.com/lab/imageViewer.html
|
|
*/
|
|
|
|
/*** picture view plugin ****/
|
|
(function ($, window, document, undefined) {
|
|
"use strict";
|
|
|
|
//an empty function
|
|
var noop = function () {};
|
|
|
|
var $body = $('body'),
|
|
$window = $(window),
|
|
$document = $(document);
|
|
|
|
|
|
//constants
|
|
var ZOOM_CONSTANT = 15; //increase or decrease value for zoom on mouse wheel
|
|
var MOUSE_WHEEL_COUNT = 5; //A mouse delta after which it should stop preventing default behaviour of mouse wheel
|
|
|
|
//ease out method
|
|
/*
|
|
t : current time,
|
|
b : intial value,
|
|
c : changed value,
|
|
d : duration
|
|
*/
|
|
function easeOutQuart(t, b, c, d) {
|
|
t /= d;
|
|
t--;
|
|
return -c * (t * t * t * t - 1) + b;
|
|
};
|
|
|
|
|
|
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
|
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
|
|
|
|
// requestAnimationFrame polyfill by Erik Möller
|
|
// fixes from Paul Irish and Tino Zijdel
|
|
|
|
(function () {
|
|
var lastTime = 0;
|
|
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
|
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
|
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
|
|
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
|
|
}
|
|
|
|
if (!window.requestAnimationFrame)
|
|
window.requestAnimationFrame = function (callback, element) {
|
|
var currTime = new Date().getTime();
|
|
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
|
var id = window.setTimeout(function () {
|
|
callback(currTime + timeToCall);
|
|
},
|
|
timeToCall);
|
|
lastTime = currTime + timeToCall;
|
|
return id;
|
|
};
|
|
|
|
if (!window.cancelAnimationFrame)
|
|
window.cancelAnimationFrame = function (id) {
|
|
clearTimeout(id);
|
|
};
|
|
}());
|
|
|
|
//function to check if image is loaded
|
|
function imageLoaded(img) {
|
|
return img.complete && (typeof img.naturalWidth === 'undefined' || img.naturalWidth !== 0);
|
|
}
|
|
|
|
var imageViewHtml = '<div class="iv-loader"></div> <div class="iv-snap-view">' + '<div class="iv-snap-image-wrap">' + '<div class="iv-snap-handle"></div>' + '</div>' + '<div class="iv-zoom-slider"><div class="iv-zoom-handle"></div></div></div>' + '<div class="iv-image-view" ><div class="iv-image-wrap" ></div></div>';
|
|
|
|
//add a full screen view
|
|
$(function () {
|
|
if(!$body.length) $body = $('body');
|
|
$body.append('<div id="iv-container">' + imageViewHtml + '<div class="iv-close"></div><div>');
|
|
});
|
|
|
|
function Slider(container, options) {
|
|
this.container = container;
|
|
this.onStart = options.onStart || noop;
|
|
this.onMove = options.onMove || noop;
|
|
this.onEnd = options.onEnd || noop;
|
|
this.sliderId = options.sliderId || 'slider' + Math.ceil(Math.random() * 1000000);
|
|
}
|
|
|
|
Slider.prototype.init = function () {
|
|
var self = this,
|
|
container = this.container,
|
|
eventSuffix = '.' + this.sliderId;
|
|
|
|
//assign event on snap image wrap
|
|
this.container.on('touchstart' + eventSuffix + ' mousedown' + eventSuffix, function (estart) {
|
|
estart.preventDefault();
|
|
var touchMove = (estart.type == "touchstart" ? "touchmove" : "mousemove") + eventSuffix,
|
|
touchEnd = (estart.type == "touchstart" ? "touchend" : "mouseup") + eventSuffix,
|
|
eOrginal = estart.originalEvent,
|
|
sx = eOrginal.clientX || eOrginal.touches[0].clientX,
|
|
sy = eOrginal.clientY || eOrginal.touches[0].clientY;
|
|
|
|
var start = self.onStart(estart, {
|
|
x: sx,
|
|
y: sy
|
|
});
|
|
|
|
if (start === false) return;
|
|
|
|
var moveListener = function (emove) {
|
|
emove.preventDefault();
|
|
|
|
eOrginal = emove.originalEvent;
|
|
|
|
//get the cordinates
|
|
var mx = eOrginal.clientX || eOrginal.touches[0].clientX,
|
|
my = eOrginal.clientY || eOrginal.touches[0].clientY;
|
|
|
|
self.onMove(emove, {
|
|
dx: mx - sx,
|
|
dy: my - sy,
|
|
mx: mx,
|
|
my: my
|
|
});
|
|
|
|
};
|
|
|
|
var endListener = function () {
|
|
$document.off(touchMove, moveListener);
|
|
$document.off(touchEnd, endListener);
|
|
self.onEnd();
|
|
};
|
|
|
|
$document.on(touchMove, moveListener);
|
|
$document.on(touchEnd, endListener);
|
|
});
|
|
|
|
return this;
|
|
}
|
|
|
|
|
|
function ImageViewer(container, options) {
|
|
var self = this;
|
|
|
|
if (container.is('#iv-container')) {
|
|
self._fullPage = true;
|
|
}
|
|
|
|
self.container = container;
|
|
options = self.options = $.extend({}, ImageViewer.defaults, options);
|
|
|
|
self.zoomValue = 100;
|
|
|
|
if (!container.find('.snap-view').length) {
|
|
container.prepend(imageViewHtml);
|
|
}
|
|
|
|
container.addClass('iv-container');
|
|
|
|
if (container.css('position') == 'static') container.css('position', 'relative');
|
|
|
|
self.snapView = container.find('.iv-snap-view');
|
|
self.snapImageWrap = container.find('.iv-snap-image-wrap');
|
|
self.imageWrap = container.find('.iv-image-wrap');
|
|
self.snapHandle = container.find('.iv-snap-handle');
|
|
self.zoomHandle = container.find('.iv-zoom-handle');
|
|
self._viewerId = 'iv' + Math.floor(Math.random() * 1000000);
|
|
}
|
|
|
|
|
|
ImageViewer.prototype = {
|
|
constructor: ImageViewer,
|
|
_init: function () {
|
|
var viewer = this,
|
|
options = viewer.options,
|
|
zooming = false, // tell weather we are zooming trough touch
|
|
container = this.container;
|
|
|
|
var eventSuffix = '.' + viewer._viewerId;
|
|
|
|
//cache dom refrence
|
|
var snapHandle = this.snapHandle;
|
|
var snapImgWrap = this.snapImageWrap;
|
|
var imageWrap = this.imageWrap;
|
|
|
|
var snapSlider = new Slider(snapImgWrap, {
|
|
sliderId: viewer._viewerId,
|
|
onStart: function () {
|
|
|
|
if (!viewer.loaded) return false;
|
|
|
|
var handleStyle = snapHandle[0].style;
|
|
|
|
this.curHandleTop = parseFloat(handleStyle.top);
|
|
this.curHandleLeft = parseFloat(handleStyle.left);
|
|
this.handleWidth = parseFloat(handleStyle.width);
|
|
this.handleHeight = parseFloat(handleStyle.height);
|
|
this.width = snapImgWrap.width();
|
|
this.height = snapImgWrap.height();
|
|
|
|
//stop momentum on image
|
|
clearInterval(imageSlider.slideMomentumCheck);
|
|
cancelAnimationFrame(imageSlider.sliderMomentumFrame);
|
|
},
|
|
onMove: function (e, position) {
|
|
var xPerc = this.curHandleLeft + position.dx * 100 / this.width,
|
|
yPerc = this.curHandleTop + position.dy * 100 / this.height;
|
|
|
|
xPerc = Math.max(0, xPerc);
|
|
xPerc = Math.min(100 - this.handleWidth, xPerc);
|
|
|
|
yPerc = Math.max(0, yPerc);
|
|
yPerc = Math.min(100 - this.handleHeight, yPerc);
|
|
|
|
|
|
var containerDim = viewer.containerDim,
|
|
imgWidth = viewer.imageDim.w * (viewer.zoomValue / 100),
|
|
imgHeight = viewer.imageDim.h * (viewer.zoomValue / 100),
|
|
imgLeft = imgWidth < containerDim.w ? (containerDim.w - imgWidth) / 2 : -imgWidth * xPerc / 100,
|
|
imgTop = imgHeight < containerDim.h ? (containerDim.h - imgHeight) / 2 : -imgHeight * yPerc / 100;
|
|
|
|
snapHandle.css({
|
|
top: yPerc + '%',
|
|
left: xPerc + '%'
|
|
})
|
|
|
|
viewer.currentImg.css({
|
|
left: imgLeft,
|
|
top: imgTop
|
|
})
|
|
}
|
|
}).init();
|
|
|
|
|
|
/*Add slide interaction to image*/
|
|
var imageSlider = viewer._imageSlider = new Slider(imageWrap, {
|
|
sliderId: viewer._viewerId,
|
|
onStart: function (e, position) {
|
|
if (!viewer.loaded) return false;
|
|
if (zooming) return;
|
|
var self = this;
|
|
snapSlider.onStart();
|
|
self.imgWidth = viewer.imageDim.w * viewer.zoomValue / 100;
|
|
self.imgHeight = viewer.imageDim.h * viewer.zoomValue / 100;
|
|
|
|
self.positions = [position, position];
|
|
|
|
self.startPosition = position;
|
|
|
|
//clear all animation frame and interval
|
|
viewer._clearFrames();
|
|
|
|
self.slideMomentumCheck = setInterval(function () {
|
|
if (!self.currentPos) return;
|
|
self.positions.shift();
|
|
self.positions.push({
|
|
x: self.currentPos.mx,
|
|
y: self.currentPos.my
|
|
})
|
|
}, 50);
|
|
},
|
|
onMove: function (e, position) {
|
|
if (zooming) return;
|
|
this.currentPos = position;
|
|
|
|
snapSlider.onMove(e, {
|
|
dx: -position.dx * snapSlider.width / this.imgWidth,
|
|
dy: -position.dy * snapSlider.height / this.imgHeight
|
|
});
|
|
},
|
|
onEnd: function () {
|
|
if (zooming) return;
|
|
var self = this;
|
|
|
|
var xDiff = this.positions[1].x - this.positions[0].x,
|
|
yDiff = this.positions[1].y - this.positions[0].y;
|
|
|
|
function momentum() {
|
|
if (step <= 60) {
|
|
self.sliderMomentumFrame = requestAnimationFrame(momentum);
|
|
}
|
|
|
|
positionX = positionX + easeOutQuart(step, xDiff / 3, -xDiff / 3, 60);
|
|
positionY = positionY + easeOutQuart(step, yDiff / 3, -yDiff / 3, 60)
|
|
|
|
|
|
snapSlider.onMove(null, {
|
|
dx: -((positionX) * snapSlider.width / self.imgWidth),
|
|
dy: -((positionY) * snapSlider.height / self.imgHeight)
|
|
});
|
|
step++;
|
|
}
|
|
|
|
if (Math.abs(xDiff) > 30 || Math.abs(yDiff) > 30) {
|
|
var step = 1,
|
|
positionX = self.currentPos.dx,
|
|
positionY = self.currentPos.dy;
|
|
|
|
momentum();
|
|
}
|
|
}
|
|
}).init();
|
|
|
|
|
|
/*Add zoom interation in mouse wheel*/
|
|
var changedDelta = 0;
|
|
imageWrap.on("mousewheel" + eventSuffix + " DOMMouseScroll" + eventSuffix, function (e) {
|
|
if(!options.zoomOnMouseWheel) return;
|
|
|
|
if (!viewer.loaded) return;
|
|
|
|
|
|
//clear all animation frame and interval
|
|
viewer._clearFrames();
|
|
|
|
// cross-browser wheel delta
|
|
var delta = Math.max(-1, Math.min(1, (e.originalEvent.wheelDelta || -e.originalEvent.detail))),
|
|
zoomValue = viewer.zoomValue * (100 + delta * ZOOM_CONSTANT) / 100;
|
|
|
|
if(!(zoomValue >= 100 && zoomValue <= options.maxZoom)){
|
|
changedDelta += Math.abs(delta);
|
|
}
|
|
else{
|
|
changedDelta = 0;
|
|
}
|
|
|
|
if(changedDelta > MOUSE_WHEEL_COUNT) return;
|
|
|
|
e.preventDefault();
|
|
|
|
var contOffset = container.offset(),
|
|
x = (e.pageX || e.originalEvent.pageX) - contOffset.left,
|
|
y = (e.pageY || e.originalEvent.pageY) - contOffset.top;
|
|
|
|
|
|
|
|
viewer.zoom(zoomValue, {
|
|
x: x,
|
|
y: y
|
|
});
|
|
|
|
//show the snap viewer
|
|
showSnapView();
|
|
});
|
|
|
|
|
|
//apply pinch and zoom feature
|
|
imageWrap.on('touchstart' + eventSuffix, function (estart) {
|
|
if (!viewer.loaded) return;
|
|
var touch0 = estart.originalEvent.touches[0],
|
|
touch1 = estart.originalEvent.touches[1];
|
|
|
|
if (!(touch0 && touch1)) {
|
|
return;
|
|
}
|
|
|
|
|
|
zooming = true;
|
|
|
|
var contOffset = container.offset();
|
|
|
|
var startdist = Math.sqrt(Math.pow(touch1.pageX - touch0.pageX, 2) + Math.pow(touch1.pageY - touch0.pageY, 2)),
|
|
startZoom = viewer.zoomValue,
|
|
center = {
|
|
x: ((touch1.pageX + touch0.pageX) / 2) - contOffset.left,
|
|
y: ((touch1.pageY + touch0.pageY) / 2) - contOffset.top
|
|
}
|
|
|
|
var moveListener = function (emove) {
|
|
emove.preventDefault();
|
|
|
|
var touch0 = emove.originalEvent.touches[0],
|
|
touch1 = emove.originalEvent.touches[1],
|
|
newDist = Math.sqrt(Math.pow(touch1.pageX - touch0.pageX, 2) + Math.pow(touch1.pageY - touch0.pageY, 2)),
|
|
zoomValue = startZoom + (newDist - startdist) / 2;
|
|
|
|
viewer.zoom(zoomValue, center);
|
|
};
|
|
|
|
var endListener = function () {
|
|
$document.off('touchmove', moveListener);
|
|
$document.off('touchend', endListener);
|
|
zooming = false;
|
|
};
|
|
|
|
$document.on('touchmove', moveListener);
|
|
$document.on('touchend', endListener);
|
|
|
|
});
|
|
|
|
|
|
//handle double tap for zoom in and zoom out
|
|
var touchtime = 0,
|
|
point;
|
|
imageWrap.on('click' + eventSuffix, function (e) {
|
|
if (touchtime == 0) {
|
|
touchtime = Date.now();
|
|
point = {
|
|
x: e.pageX,
|
|
y: e.pageY
|
|
};
|
|
} else {
|
|
if ((Date.now() - touchtime) < 500 && Math.abs(e.pageX - point.x) < 50 && Math.abs(e.pageY - point.y) < 50) {
|
|
if (viewer.zoomValue == options.zoomValue) {
|
|
viewer.zoom(200)
|
|
} else {
|
|
viewer.resetZoom()
|
|
}
|
|
touchtime = 0;
|
|
} else {
|
|
touchtime = 0;
|
|
}
|
|
}
|
|
});
|
|
|
|
//zoom in zoom out using zoom handle
|
|
var slider = viewer.snapView.find('.iv-zoom-slider');
|
|
var zoomSlider = new Slider(slider, {
|
|
sliderId: viewer._viewerId,
|
|
onStart: function (eStart) {
|
|
|
|
if (!viewer.loaded) return false;
|
|
|
|
this.leftOffset = slider.offset().left;
|
|
this.handleWidth = viewer.zoomHandle.width();
|
|
this.onMove(eStart);
|
|
|
|
},
|
|
onMove: function (e, position) {
|
|
var newLeft = (e.pageX || e.originalEvent.touches[0].pageX) - this.leftOffset - this.handleWidth / 2;
|
|
|
|
newLeft = Math.max(0, newLeft);
|
|
newLeft = Math.min(viewer._zoomSliderLength, newLeft);
|
|
|
|
var zoomValue = 100 + (options.maxZoom - 100) * newLeft / viewer._zoomSliderLength;
|
|
|
|
viewer.zoom(zoomValue);
|
|
}
|
|
}).init();
|
|
|
|
|
|
//display snapView on interaction
|
|
var snapViewTimeout, snapViewVisible;
|
|
|
|
function showSnapView(noTimeout) {
|
|
if(!options.snapView) return;
|
|
|
|
if (snapViewVisible || viewer.zoomValue <= 100 || !viewer.loaded) return;
|
|
clearTimeout(snapViewTimeout);
|
|
snapViewVisible = true;
|
|
viewer.snapView.css('opacity', 1);
|
|
if (!noTimeout) {
|
|
snapViewTimeout = setTimeout(function () {
|
|
viewer.snapView.css('opacity', 0);
|
|
snapViewVisible = false;
|
|
}, 4000);
|
|
}
|
|
}
|
|
|
|
imageWrap.on('touchmove' + eventSuffix + ' mousemove' + eventSuffix, function () {
|
|
showSnapView();
|
|
});
|
|
|
|
var snapEventsCallback = {};
|
|
snapEventsCallback['mouseenter' + eventSuffix + ' touchstart' + eventSuffix] = function () {
|
|
snapViewVisible = false;
|
|
showSnapView(true);
|
|
};
|
|
|
|
snapEventsCallback['mouseleave' + eventSuffix + ' touchend' + eventSuffix] = function () {
|
|
snapViewVisible = false;
|
|
showSnapView();
|
|
};
|
|
|
|
viewer.snapView.on(snapEventsCallback);
|
|
|
|
|
|
//calculate elments size on window resize
|
|
if (options.refreshOnResize) $window.on('resize' + eventSuffix, function () {
|
|
viewer.refresh()
|
|
});
|
|
|
|
if (viewer._fullPage) {
|
|
//prevent scrolling the backside if container if fixed positioned
|
|
container.on('touchmove' + eventSuffix + ' mousewheel' + eventSuffix + ' DOMMouseScroll' + eventSuffix, function (e) {
|
|
e.preventDefault();
|
|
});
|
|
|
|
//assign event on close button
|
|
container.find('.iv-close').on('click' + eventSuffix, function () {
|
|
viewer.hide();
|
|
});
|
|
}
|
|
},
|
|
|
|
//method to zoom images
|
|
zoom: function (perc, point) {
|
|
perc = Math.round(Math.max(100, perc));
|
|
perc = Math.min(this.options.maxZoom, perc);
|
|
|
|
point = point || {
|
|
x: this.containerDim.w / 2,
|
|
y: this.containerDim.h / 2
|
|
};
|
|
|
|
var self = this,
|
|
maxZoom = this.options.maxZoom,
|
|
curPerc = this.zoomValue,
|
|
curImg = this.currentImg,
|
|
containerDim = this.containerDim,
|
|
curLeft = parseFloat(curImg.css('left')),
|
|
curTop = parseFloat(curImg.css('top'));
|
|
|
|
self._clearFrames();
|
|
|
|
var step = 0;
|
|
|
|
//calculate base top,left,bottom,right
|
|
var containerDim = self.containerDim,
|
|
imageDim = self.imageDim;
|
|
var baseLeft = (containerDim.w - imageDim.w) / 2,
|
|
baseTop = (containerDim.h - imageDim.h) / 2,
|
|
baseRight = containerDim.w - baseLeft,
|
|
baseBottom = containerDim.h - baseTop;
|
|
|
|
function zoom() {
|
|
step++;
|
|
|
|
if (step < 20) {
|
|
self._zoomFrame = requestAnimationFrame(zoom);
|
|
}
|
|
|
|
var tickZoom = easeOutQuart(step, curPerc, perc - curPerc, 20);
|
|
|
|
|
|
var ratio = tickZoom / curPerc,
|
|
imgWidth = self.imageDim.w * tickZoom / 100,
|
|
imgHeight = self.imageDim.h * tickZoom / 100,
|
|
newLeft = -((point.x - curLeft) * ratio - point.x),
|
|
newTop = -((point.y - curTop) * ratio - point.y);
|
|
|
|
//fix for left and top
|
|
newLeft = Math.min(newLeft, baseLeft);
|
|
newTop = Math.min(newTop, baseTop);
|
|
|
|
//fix for right and bottom
|
|
if((newLeft + imgWidth) < baseRight){
|
|
newLeft = baseRight - imgWidth; //newLeft - (newLeft + imgWidth - baseRight)
|
|
}
|
|
|
|
if((newTop + imgHeight) < baseBottom){
|
|
newTop = baseBottom - imgHeight; //newTop + (newTop + imgHeight - baseBottom)
|
|
}
|
|
|
|
|
|
curImg.css({
|
|
height: imgHeight + 'px',
|
|
width: imgWidth + 'px',
|
|
left: newLeft + 'px',
|
|
top: newTop + 'px'
|
|
});
|
|
|
|
self.zoomValue = tickZoom;
|
|
|
|
self._resizeHandle(imgWidth, imgHeight, newLeft, newTop);
|
|
|
|
//update zoom handle position
|
|
self.zoomHandle.css('left', ((tickZoom - 100) * self._zoomSliderLength) / (maxZoom - 100) + 'px');
|
|
}
|
|
|
|
zoom();
|
|
},
|
|
_clearFrames: function () {
|
|
clearInterval(this._imageSlider.slideMomentumCheck);
|
|
cancelAnimationFrame(this._imageSlider.sliderMomentumFrame);
|
|
cancelAnimationFrame(this._zoomFrame)
|
|
},
|
|
resetZoom: function () {
|
|
this.zoom(this.options.zoomValue);
|
|
},
|
|
//calculate dimensions of image, container and reset the image
|
|
_calculateDimensions: function () {
|
|
//calculate content width of image and snap image
|
|
var self = this,
|
|
curImg = self.currentImg,
|
|
container = self.container,
|
|
snapView = self.snapView,
|
|
imageWidth = curImg.width(),
|
|
imageHeight = curImg.height(),
|
|
contWidth = container.width(),
|
|
contHeight = container.height(),
|
|
snapViewWidth = snapView.innerWidth(),
|
|
snapViewHeight = snapView.innerHeight();
|
|
|
|
//set the container dimension
|
|
self.containerDim = {
|
|
w: contWidth,
|
|
h: contHeight
|
|
}
|
|
|
|
//set the image dimension
|
|
var imgWidth, imgHeight, ratio = imageWidth / imageHeight;
|
|
|
|
imgWidth = (imageWidth > imageHeight && contHeight >= contWidth) || ratio * contHeight > contWidth ? contWidth : ratio * contHeight;
|
|
|
|
imgHeight = imgWidth / ratio;
|
|
|
|
self.imageDim = {
|
|
w: imgWidth,
|
|
h: imgHeight
|
|
}
|
|
|
|
//reset image position and zoom
|
|
curImg.css({
|
|
width: imgWidth + 'px',
|
|
height: imgHeight + 'px',
|
|
left: (contWidth - imgWidth) / 2 + 'px',
|
|
top: (contHeight - imgHeight) / 2 + 'px',
|
|
'max-width': 'none',
|
|
'max-height': 'none'
|
|
});
|
|
|
|
//set the snap Image dimension
|
|
var snapWidth = imgWidth > imgHeight ? snapViewWidth : imgWidth * snapViewHeight / imgHeight,
|
|
snapHeight = imgHeight > imgWidth ? snapViewHeight : imgHeight * snapViewWidth / imgWidth;
|
|
|
|
self.snapImageDim = {
|
|
w: snapWidth,
|
|
h: snapHeight
|
|
}
|
|
|
|
self.snapImg.css({
|
|
width: snapWidth,
|
|
height: snapHeight
|
|
});
|
|
|
|
//calculate zoom slider area
|
|
self._zoomSliderLength = snapViewWidth - self.zoomHandle.outerWidth();
|
|
|
|
},
|
|
refresh: function () {
|
|
if (!this.loaded) return;
|
|
this._calculateDimensions();
|
|
this.resetZoom();
|
|
},
|
|
_resizeHandle: function (imgWidth, imgHeight, imgLeft, imgTop) {
|
|
var curImg = this.currentImg,
|
|
imageWidth = imgWidth || this.imageDim.w * this.zoomValue / 100,
|
|
imageHeight = imgHeight || this.imageDim.h * this.zoomValue / 100,
|
|
left = Math.max(-(imgLeft || parseFloat(curImg.css('left'))) * 100 / imageWidth, 0),
|
|
top = Math.max(-(imgTop || parseFloat(curImg.css('top'))) * 100 / imageHeight, 0),
|
|
handleWidth = Math.min(this.containerDim.w * 100 / imageWidth, 100),
|
|
handleHeight = Math.min(this.containerDim.h * 100 / imageHeight, 100);
|
|
|
|
|
|
this.snapHandle.css({
|
|
top: top + '%',
|
|
left: left + '%',
|
|
width: handleWidth + '%',
|
|
height: handleHeight + '%'
|
|
});
|
|
},
|
|
show: function (image, hiResImg) {
|
|
if (this._fullPage) {
|
|
this.container.show();
|
|
if (image) this.load(image, hiResImg);
|
|
}
|
|
},
|
|
hide: function () {
|
|
if (this._fullPage) {
|
|
this.container.hide();
|
|
}
|
|
},
|
|
options: function (key, value) {
|
|
if (!value) return this.options[key];
|
|
|
|
this.options[key] = value;
|
|
},
|
|
destroy: function (key, value) {
|
|
var eventSuffix = '.' + this._viewerId;
|
|
if (this._fullPage) {
|
|
container.off(eventSuffix);
|
|
container.find('[class^="iv"]').off(eventSuffix);
|
|
} else {
|
|
this.container.remove('[class^="iv"]');
|
|
}
|
|
$window.off(eventSuffix);
|
|
return null;
|
|
},
|
|
load: function (image, hiResImg) {
|
|
var self = this,
|
|
container = this.container;
|
|
|
|
container.find('.iv-snap-image,.iv-large-image').remove();
|
|
var snapImageWrap = this.container.find('.iv-snap-image-wrap');
|
|
snapImageWrap.prepend('<img class="iv-snap-image" src="' + image + '" />');
|
|
this.imageWrap.prepend('<img class="iv-large-image" src="' + image + '" />');
|
|
|
|
if (hiResImg) {
|
|
this.imageWrap.append('<img class="iv-large-image" src="' + hiResImg + '" />')
|
|
}
|
|
|
|
var currentImg = this.currentImg = this.container.find('.iv-large-image');
|
|
this.snapImg = this.container.find('.iv-snap-image');
|
|
self.loaded = false;
|
|
|
|
//show loader
|
|
container.find('.iv-loader').show();
|
|
currentImg.hide();
|
|
self.snapImg.hide();
|
|
|
|
//refresh the view
|
|
function refreshView() {
|
|
self.loaded = true;
|
|
self.zoomValue = 100;
|
|
|
|
//reset zoom of images
|
|
currentImg.show();
|
|
self.snapImg.show();
|
|
self.refresh();
|
|
self.resetZoom();
|
|
|
|
//hide loader
|
|
container.find('.iv-loader').hide();
|
|
}
|
|
|
|
if (imageLoaded(currentImg[0])) {
|
|
refreshView();
|
|
} else {
|
|
$(currentImg[0]).on('load', refreshView);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
ImageViewer.defaults = {
|
|
zoomValue: 100,
|
|
snapView: true,
|
|
maxZoom: 500,
|
|
refreshOnResize: true,
|
|
zoomOnMouseWheel : true
|
|
}
|
|
|
|
window.ImageViewer = function (container, options) {
|
|
var imgElm, imgSrc, hiResImg;
|
|
if (!(container && (typeof container == "string" || container instanceof Element || container[0] instanceof Element))) {
|
|
options = container;
|
|
container = $('#iv-container');
|
|
}
|
|
|
|
container = $(container);
|
|
|
|
if (container.is('img')) {
|
|
imgElm = container;
|
|
imgSrc = imgElm[0].src;
|
|
hiResImg = imgElm.attr('high-res-src') || imgElm.attr('data-high-res-src');
|
|
container = imgElm.wrap('<div class="iv-container" style="display:inline-block; overflow:hidden"></div>').parent();
|
|
imgElm.css({
|
|
opacity: 0,
|
|
position: 'relative',
|
|
zIndex: -1
|
|
});
|
|
} else {
|
|
imgSrc = container.attr('src') || container.attr('data-src');
|
|
hiResImg = container.attr('high-res-src') || container.attr('data-high-res-src');
|
|
}
|
|
|
|
|
|
var viewer = new ImageViewer(container, options);
|
|
viewer._init();
|
|
|
|
if (imgSrc) viewer.load(imgSrc, hiResImg);
|
|
|
|
return viewer;
|
|
};
|
|
|
|
|
|
$.fn.ImageViewer = function (options) {
|
|
return this.each(function () {
|
|
var $this = $(this);
|
|
var viewer = window.ImageViewer($this, options);
|
|
$this.data('ImageViewer', viewer);
|
|
});
|
|
}
|
|
|
|
}((window.jQuery), window, document));
|