mirror of
https://github.com/medialab-prado/poblados-colonizacion-colonias-penitenciarias.git
synced 2025-06-08 06:21:28 +02:00
sliders
This commit is contained in:
abe-
parent
1ce4976d7f
commit
d02aa19f9f
5 changed files with 7 additions and 8 deletions
|
|
@ -1,9 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
<script src="jquery-3.2.1.min.js"></script>
|
||||
<script src="jquery.event.move.js"></script>
|
||||
<script src="jquery.twentytwenty.js"></script>
|
||||
<link rel="stylesheet" href="twentytwenty.css" type="text/css" media="screen" />
|
||||
<script src="js/jquery-3.2.1.min.js"></script>
|
||||
<script src="js/jquery.event.move.js"></script>
|
||||
<script src="js/jquery.twentytwenty.js"></script>
|
||||
<link rel="stylesheet" href="css/twentytwenty.css" type="text/css" media="screen" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container1" class="twentytwenty-container">
|
||||
|
|
|
|||
|
|
@ -1,584 +0,0 @@
|
|||
// DOM.event.move
|
||||
//
|
||||
// 2.0.0
|
||||
//
|
||||
// Stephen Band
|
||||
//
|
||||
// Triggers 'movestart', 'move' and 'moveend' events after
|
||||
// mousemoves following a mousedown cross a distance threshold,
|
||||
// similar to the native 'dragstart', 'drag' and 'dragend' events.
|
||||
// Move events are throttled to animation frames. Move event objects
|
||||
// have the properties:
|
||||
//
|
||||
// pageX:
|
||||
// pageY: Page coordinates of pointer.
|
||||
// startX:
|
||||
// startY: Page coordinates of pointer at movestart.
|
||||
// distX:
|
||||
// distY: Distance the pointer has moved since movestart.
|
||||
// deltaX:
|
||||
// deltaY: Distance the finger has moved since last event.
|
||||
// velocityX:
|
||||
// velocityY: Average velocity over last few events.
|
||||
|
||||
|
||||
(function(fn) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define([], fn);
|
||||
} else if ((typeof module !== "undefined" && module !== null) && module.exports) {
|
||||
module.exports = fn;
|
||||
} else {
|
||||
fn();
|
||||
}
|
||||
})(function(){
|
||||
var assign = Object.assign || window.jQuery && jQuery.extend;
|
||||
|
||||
// Number of pixels a pressed pointer travels before movestart
|
||||
// event is fired.
|
||||
var threshold = 8;
|
||||
|
||||
// Shim for requestAnimationFrame, falling back to timer. See:
|
||||
// see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
||||
var requestFrame = (function(){
|
||||
return (
|
||||
window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(fn, element){
|
||||
return window.setTimeout(function(){
|
||||
fn();
|
||||
}, 25);
|
||||
}
|
||||
);
|
||||
})();
|
||||
|
||||
var ignoreTags = {
|
||||
textarea: true,
|
||||
input: true,
|
||||
select: true,
|
||||
button: true
|
||||
};
|
||||
|
||||
var mouseevents = {
|
||||
move: 'mousemove',
|
||||
cancel: 'mouseup dragstart',
|
||||
end: 'mouseup'
|
||||
};
|
||||
|
||||
var touchevents = {
|
||||
move: 'touchmove',
|
||||
cancel: 'touchend',
|
||||
end: 'touchend'
|
||||
};
|
||||
|
||||
var rspaces = /\s+/;
|
||||
|
||||
|
||||
// DOM Events
|
||||
|
||||
var eventOptions = { bubbles: true, cancelable: true };
|
||||
|
||||
var eventsSymbol = Symbol('events');
|
||||
|
||||
function createEvent(type) {
|
||||
return new CustomEvent(type, eventOptions);
|
||||
}
|
||||
|
||||
function getEvents(node) {
|
||||
return node[eventsSymbol] || (node[eventsSymbol] = {});
|
||||
}
|
||||
|
||||
function on(node, types, fn, data, selector) {
|
||||
types = types.split(rspaces);
|
||||
|
||||
var events = getEvents(node);
|
||||
var i = types.length;
|
||||
var handlers, type;
|
||||
|
||||
function handler(e) { fn(e, data); }
|
||||
|
||||
while (i--) {
|
||||
type = types[i];
|
||||
handlers = events[type] || (events[type] = []);
|
||||
handlers.push([fn, handler]);
|
||||
node.addEventListener(type, handler);
|
||||
}
|
||||
}
|
||||
|
||||
function off(node, types, fn, selector) {
|
||||
types = types.split(rspaces);
|
||||
|
||||
var events = getEvents(node);
|
||||
var i = types.length;
|
||||
var type, handlers, k;
|
||||
|
||||
if (!events) { return; }
|
||||
|
||||
while (i--) {
|
||||
type = types[i];
|
||||
handlers = events[type];
|
||||
if (!handlers) { continue; }
|
||||
k = handlers.length;
|
||||
while (k--) {
|
||||
if (handlers[k][0] === fn) {
|
||||
node.removeEventListener(type, handlers[k][1]);
|
||||
handlers.splice(k, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function trigger(node, type, properties) {
|
||||
// Don't cache events. It prevents you from triggering an event of a
|
||||
// given type from inside the handler of another event of that type.
|
||||
var event = createEvent(type);
|
||||
if (properties) { assign(event, properties); }
|
||||
node.dispatchEvent(event);
|
||||
}
|
||||
|
||||
|
||||
// Constructors
|
||||
|
||||
function Timer(fn){
|
||||
var callback = fn,
|
||||
active = false,
|
||||
running = false;
|
||||
|
||||
function trigger(time) {
|
||||
if (active){
|
||||
callback();
|
||||
requestFrame(trigger);
|
||||
running = true;
|
||||
active = false;
|
||||
}
|
||||
else {
|
||||
running = false;
|
||||
}
|
||||
}
|
||||
|
||||
this.kick = function(fn) {
|
||||
active = true;
|
||||
if (!running) { trigger(); }
|
||||
};
|
||||
|
||||
this.end = function(fn) {
|
||||
var cb = callback;
|
||||
|
||||
if (!fn) { return; }
|
||||
|
||||
// If the timer is not running, simply call the end callback.
|
||||
if (!running) {
|
||||
fn();
|
||||
}
|
||||
// If the timer is running, and has been kicked lately, then
|
||||
// queue up the current callback and the end callback, otherwise
|
||||
// just the end callback.
|
||||
else {
|
||||
callback = active ?
|
||||
function(){ cb(); fn(); } :
|
||||
fn ;
|
||||
|
||||
active = true;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// Functions
|
||||
|
||||
function noop() {}
|
||||
|
||||
function preventDefault(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function isIgnoreTag(e) {
|
||||
return !!ignoreTags[e.target.tagName.toLowerCase()];
|
||||
}
|
||||
|
||||
function isPrimaryButton(e) {
|
||||
// Ignore mousedowns on any button other than the left (or primary)
|
||||
// mouse button, or when a modifier key is pressed.
|
||||
return (e.which === 1 && !e.ctrlKey && !e.altKey);
|
||||
}
|
||||
|
||||
function identifiedTouch(touchList, id) {
|
||||
var i, l;
|
||||
|
||||
if (touchList.identifiedTouch) {
|
||||
return touchList.identifiedTouch(id);
|
||||
}
|
||||
|
||||
// touchList.identifiedTouch() does not exist in
|
||||
// webkit yet… we must do the search ourselves...
|
||||
|
||||
i = -1;
|
||||
l = touchList.length;
|
||||
|
||||
while (++i < l) {
|
||||
if (touchList[i].identifier === id) {
|
||||
return touchList[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function changedTouch(e, data) {
|
||||
var touch = identifiedTouch(e.changedTouches, data.identifier);
|
||||
|
||||
// This isn't the touch you're looking for.
|
||||
if (!touch) { return; }
|
||||
|
||||
// Chrome Android (at least) includes touches that have not
|
||||
// changed in e.changedTouches. That's a bit annoying. Check
|
||||
// that this touch has changed.
|
||||
if (touch.pageX === data.pageX && touch.pageY === data.pageY) { return; }
|
||||
|
||||
return touch;
|
||||
}
|
||||
|
||||
|
||||
// Handlers that decide when the first movestart is triggered
|
||||
|
||||
function mousedown(e){
|
||||
// Ignore non-primary buttons
|
||||
if (!isPrimaryButton(e)) { return; }
|
||||
|
||||
// Ignore form and interactive elements
|
||||
if (isIgnoreTag(e)) { return; }
|
||||
|
||||
on(document, mouseevents.move, mousemove, e);
|
||||
on(document, mouseevents.cancel, mouseend, e);
|
||||
}
|
||||
|
||||
function mousemove(e, data){
|
||||
checkThreshold(e, data, e, removeMouse);
|
||||
}
|
||||
|
||||
function mouseend(e, data) {
|
||||
removeMouse();
|
||||
}
|
||||
|
||||
function removeMouse() {
|
||||
off(document, mouseevents.move, mousemove);
|
||||
off(document, mouseevents.cancel, mouseend);
|
||||
}
|
||||
|
||||
function touchstart(e) {
|
||||
// Don't get in the way of interaction with form elements
|
||||
if (ignoreTags[e.target.tagName.toLowerCase()]) { return; }
|
||||
|
||||
var touch = e.changedTouches[0];
|
||||
|
||||
// iOS live updates the touch objects whereas Android gives us copies.
|
||||
// That means we can't trust the touchstart object to stay the same,
|
||||
// so we must copy the data. This object acts as a template for
|
||||
// movestart, move and moveend event objects.
|
||||
var data = {
|
||||
target: touch.target,
|
||||
pageX: touch.pageX,
|
||||
pageY: touch.pageY,
|
||||
identifier: touch.identifier,
|
||||
|
||||
// The only way to make handlers individually unbindable is by
|
||||
// making them unique.
|
||||
touchmove: function(e, data) { touchmove(e, data); },
|
||||
touchend: function(e, data) { touchend(e, data); }
|
||||
};
|
||||
|
||||
on(document, touchevents.move, data.touchmove, data);
|
||||
on(document, touchevents.cancel, data.touchend, data);
|
||||
}
|
||||
|
||||
function touchmove(e, data) {
|
||||
var touch = changedTouch(e, data);
|
||||
if (!touch) { return; }
|
||||
checkThreshold(e, data, touch, removeTouch);
|
||||
}
|
||||
|
||||
function touchend(e, data) {
|
||||
var touch = identifiedTouch(e.changedTouches, data.identifier);
|
||||
if (!touch) { return; }
|
||||
removeTouch(data);
|
||||
}
|
||||
|
||||
function removeTouch(data) {
|
||||
off(document, touchevents.move, data.touchmove);
|
||||
off(document, touchevents.cancel, data.touchend);
|
||||
}
|
||||
|
||||
function checkThreshold(e, data, touch, fn) {
|
||||
var distX = touch.pageX - data.pageX;
|
||||
var distY = touch.pageY - data.pageY;
|
||||
|
||||
// Do nothing if the threshold has not been crossed.
|
||||
if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; }
|
||||
|
||||
triggerStart(e, data, touch, distX, distY, fn);
|
||||
}
|
||||
|
||||
function triggerStart(e, data, touch, distX, distY, fn) {
|
||||
var touches = e.targetTouches;
|
||||
var time = e.timeStamp - data.timeStamp;
|
||||
|
||||
// Create a movestart object with some special properties that
|
||||
// are passed only to the movestart handlers.
|
||||
var template = {
|
||||
altKey: e.altKey,
|
||||
ctrlKey: e.ctrlKey,
|
||||
shiftKey: e.shiftKey,
|
||||
startX: data.pageX,
|
||||
startY: data.pageY,
|
||||
distX: distX,
|
||||
distY: distY,
|
||||
deltaX: distX,
|
||||
deltaY: distY,
|
||||
pageX: touch.pageX,
|
||||
pageY: touch.pageY,
|
||||
velocityX: distX / time,
|
||||
velocityY: distY / time,
|
||||
identifier: data.identifier,
|
||||
targetTouches: touches,
|
||||
finger: touches ? touches.length : 1,
|
||||
enableMove: function() {
|
||||
this.moveEnabled = true;
|
||||
this.enableMove = noop;
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
// Trigger the movestart event.
|
||||
trigger(data.target, 'movestart', template);
|
||||
|
||||
// Unbind handlers that tracked the touch or mouse up till now.
|
||||
fn(data);
|
||||
}
|
||||
|
||||
|
||||
// Handlers that control what happens following a movestart
|
||||
|
||||
function activeMousemove(e, data) {
|
||||
var timer = data.timer;
|
||||
|
||||
data.touch = e;
|
||||
data.timeStamp = e.timeStamp;
|
||||
timer.kick();
|
||||
}
|
||||
|
||||
function activeMouseend(e, data) {
|
||||
var target = data.target;
|
||||
var event = data.event;
|
||||
var timer = data.timer;
|
||||
|
||||
removeActiveMouse();
|
||||
|
||||
endEvent(target, event, timer, function() {
|
||||
// Unbind the click suppressor, waiting until after mouseup
|
||||
// has been handled.
|
||||
setTimeout(function(){
|
||||
off(target, 'click', preventDefault);
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
|
||||
function removeActiveMouse() {
|
||||
off(document, mouseevents.move, activeMousemove);
|
||||
off(document, mouseevents.end, activeMouseend);
|
||||
}
|
||||
|
||||
function activeTouchmove(e, data) {
|
||||
var event = data.event;
|
||||
var timer = data.timer;
|
||||
var touch = changedTouch(e, event);
|
||||
|
||||
if (!touch) { return; }
|
||||
|
||||
// Stop the interface from gesturing
|
||||
e.preventDefault();
|
||||
|
||||
event.targetTouches = e.targetTouches;
|
||||
data.touch = touch;
|
||||
data.timeStamp = e.timeStamp;
|
||||
|
||||
timer.kick();
|
||||
}
|
||||
|
||||
function activeTouchend(e, data) {
|
||||
var target = data.target;
|
||||
var event = data.event;
|
||||
var timer = data.timer;
|
||||
var touch = identifiedTouch(e.changedTouches, event.identifier);
|
||||
|
||||
// This isn't the touch you're looking for.
|
||||
if (!touch) { return; }
|
||||
|
||||
removeActiveTouch(data);
|
||||
endEvent(target, event, timer);
|
||||
}
|
||||
|
||||
function removeActiveTouch(data) {
|
||||
off(document, touchevents.move, data.activeTouchmove);
|
||||
off(document, touchevents.end, data.activeTouchend);
|
||||
}
|
||||
|
||||
|
||||
// Logic for triggering move and moveend events
|
||||
|
||||
function updateEvent(event, touch, timeStamp) {
|
||||
var time = timeStamp - event.timeStamp;
|
||||
|
||||
event.distX = touch.pageX - event.startX;
|
||||
event.distY = touch.pageY - event.startY;
|
||||
event.deltaX = touch.pageX - event.pageX;
|
||||
event.deltaY = touch.pageY - event.pageY;
|
||||
|
||||
// Average the velocity of the last few events using a decay
|
||||
// curve to even out spurious jumps in values.
|
||||
event.velocityX = 0.3 * event.velocityX + 0.7 * event.deltaX / time;
|
||||
event.velocityY = 0.3 * event.velocityY + 0.7 * event.deltaY / time;
|
||||
event.pageX = touch.pageX;
|
||||
event.pageY = touch.pageY;
|
||||
}
|
||||
|
||||
function endEvent(target, event, timer, fn) {
|
||||
timer.end(function(){
|
||||
trigger(target, 'moveend', event);
|
||||
return fn && fn();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Set up the DOM
|
||||
|
||||
function movestart(e) {
|
||||
if (e.defaultPrevented) { return; }
|
||||
if (!e.moveEnabled) { return; }
|
||||
|
||||
var event = {
|
||||
startX: e.startX,
|
||||
startY: e.startY,
|
||||
pageX: e.pageX,
|
||||
pageY: e.pageY,
|
||||
distX: e.distX,
|
||||
distY: e.distY,
|
||||
deltaX: e.deltaX,
|
||||
deltaY: e.deltaY,
|
||||
velocityX: e.velocityX,
|
||||
velocityY: e.velocityY,
|
||||
identifier: e.identifier,
|
||||
targetTouches: e.targetTouches,
|
||||
finger: e.finger
|
||||
};
|
||||
|
||||
var data = {
|
||||
target: e.target,
|
||||
event: event,
|
||||
timer: new Timer(update),
|
||||
touch: undefined,
|
||||
timeStamp: e.timeStamp
|
||||
};
|
||||
|
||||
function update(time) {
|
||||
updateEvent(event, data.touch, data.timeStamp);
|
||||
trigger(data.target, 'move', event);
|
||||
}
|
||||
|
||||
if (e.identifier === undefined) {
|
||||
// We're dealing with a mouse event.
|
||||
// Stop clicks from propagating during a move
|
||||
on(e.target, 'click', preventDefault);
|
||||
on(document, mouseevents.move, activeMousemove, data);
|
||||
on(document, mouseevents.end, activeMouseend, data);
|
||||
}
|
||||
else {
|
||||
// In order to unbind correct handlers they have to be unique
|
||||
data.activeTouchmove = function(e, data) { activeTouchmove(e, data); };
|
||||
data.activeTouchend = function(e, data) { activeTouchend(e, data); };
|
||||
|
||||
// We're dealing with a touch.
|
||||
on(document, touchevents.move, data.activeTouchmove, data);
|
||||
on(document, touchevents.end, data.activeTouchend, data);
|
||||
}
|
||||
}
|
||||
|
||||
on(document, 'mousedown', mousedown);
|
||||
on(document, 'touchstart', touchstart);
|
||||
on(document, 'movestart', movestart);
|
||||
|
||||
|
||||
// jQuery special events
|
||||
//
|
||||
// jQuery event objects are copies of DOM event objects. They need
|
||||
// a little help copying the move properties across.
|
||||
|
||||
if (!window.jQuery) { return; }
|
||||
|
||||
var properties = ("startX startY pageX pageY distX distY deltaX deltaY velocityX velocityY").split(' ');
|
||||
|
||||
function enableMove1(e) { e.enableMove(); }
|
||||
function enableMove2(e) { e.enableMove(); }
|
||||
function enableMove3(e) { e.enableMove(); }
|
||||
|
||||
function add(handleObj) {
|
||||
var handler = handleObj.handler;
|
||||
|
||||
handleObj.handler = function(e) {
|
||||
// Copy move properties across from originalEvent
|
||||
var i = properties.length;
|
||||
var property;
|
||||
|
||||
while(i--) {
|
||||
property = properties[i];
|
||||
e[property] = e.originalEvent[property];
|
||||
}
|
||||
|
||||
handler.apply(this, arguments);
|
||||
};
|
||||
}
|
||||
|
||||
jQuery.event.special.movestart = {
|
||||
setup: function() {
|
||||
// Movestart must be enabled to allow other move events
|
||||
on(this, 'movestart', enableMove1);
|
||||
|
||||
// Do listen to DOM events
|
||||
return false;
|
||||
},
|
||||
|
||||
teardown: function() {
|
||||
off(this, 'movestart', enableMove1);
|
||||
return false;
|
||||
},
|
||||
|
||||
add: add
|
||||
};
|
||||
|
||||
jQuery.event.special.move = {
|
||||
setup: function() {
|
||||
on(this, 'movestart', enableMove2);
|
||||
return false;
|
||||
},
|
||||
|
||||
teardown: function() {
|
||||
off(this, 'movestart', enableMove2);
|
||||
return false;
|
||||
},
|
||||
|
||||
add: add
|
||||
};
|
||||
|
||||
jQuery.event.special.moveend = {
|
||||
setup: function() {
|
||||
on(this, 'movestart', enableMove3);
|
||||
return false;
|
||||
},
|
||||
|
||||
teardown: function() {
|
||||
off(this, 'movestart', enableMove3);
|
||||
return false;
|
||||
},
|
||||
|
||||
add: add
|
||||
};
|
||||
});
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
(function($){
|
||||
|
||||
$.fn.twentytwenty = function(options) {
|
||||
var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal', before_label: 'Before', after_label: 'After', no_overlay: false}, options);
|
||||
return this.each(function() {
|
||||
|
||||
var sliderPct = options.default_offset_pct;
|
||||
var container = $(this);
|
||||
var sliderOrientation = options.orientation;
|
||||
var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
|
||||
var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
|
||||
|
||||
|
||||
container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
|
||||
if(!options.no_overlay) {
|
||||
container.append("<div class='twentytwenty-overlay'></div>");
|
||||
}
|
||||
var beforeImg = container.find("img:first");
|
||||
var afterImg = container.find("img:last");
|
||||
container.append("<div class='twentytwenty-handle'></div>");
|
||||
var slider = container.find(".twentytwenty-handle");
|
||||
slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
|
||||
slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
|
||||
container.addClass("twentytwenty-container");
|
||||
beforeImg.addClass("twentytwenty-before");
|
||||
afterImg.addClass("twentytwenty-after");
|
||||
|
||||
var overlay = container.find(".twentytwenty-overlay");
|
||||
overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
|
||||
overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
|
||||
|
||||
var calcOffset = function(dimensionPct) {
|
||||
var w = beforeImg.width();
|
||||
var h = beforeImg.height();
|
||||
return {
|
||||
w: w+"px",
|
||||
h: h+"px",
|
||||
cw: (dimensionPct*w)+"px",
|
||||
ch: (dimensionPct*h)+"px"
|
||||
};
|
||||
};
|
||||
|
||||
var adjustContainer = function(offset) {
|
||||
if (sliderOrientation === 'vertical') {
|
||||
beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
|
||||
afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)");
|
||||
}
|
||||
else {
|
||||
beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
|
||||
afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
|
||||
}
|
||||
container.css("height", offset.h);
|
||||
};
|
||||
|
||||
var adjustSlider = function(pct) {
|
||||
var offset = calcOffset(pct);
|
||||
slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
|
||||
adjustContainer(offset);
|
||||
};
|
||||
|
||||
$(window).on("resize.twentytwenty", function(e) {
|
||||
adjustSlider(sliderPct);
|
||||
});
|
||||
|
||||
var offsetX = 0;
|
||||
var offsetY = 0;
|
||||
var imgWidth = 0;
|
||||
var imgHeight = 0;
|
||||
|
||||
slider.on("movestart", function(e) {
|
||||
if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
|
||||
e.preventDefault();
|
||||
}
|
||||
else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
|
||||
e.preventDefault();
|
||||
}
|
||||
container.addClass("active");
|
||||
offsetX = container.offset().left;
|
||||
offsetY = container.offset().top;
|
||||
imgWidth = beforeImg.width();
|
||||
imgHeight = beforeImg.height();
|
||||
});
|
||||
|
||||
slider.on("moveend", function(e) {
|
||||
container.removeClass("active");
|
||||
});
|
||||
|
||||
slider.on("move", function(e) {
|
||||
if (container.hasClass("active")) {
|
||||
sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight : (e.pageX-offsetX)/imgWidth;
|
||||
if (sliderPct < 0) {
|
||||
sliderPct = 0;
|
||||
}
|
||||
if (sliderPct > 1) {
|
||||
sliderPct = 1;
|
||||
}
|
||||
adjustSlider(sliderPct);
|
||||
}
|
||||
});
|
||||
|
||||
container.find("img").on("mousedown", function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$(window).trigger("resize.twentytwenty");
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
<html>
|
||||
<head>
|
||||
<script src="jquery-3.2.1.min.js"></script>
|
||||
<script src="jquery.event.move.js"></script>
|
||||
<script src="jquery.twentytwenty.js"></script>
|
||||
<link rel="stylesheet" href="twentytwenty.css" type="text/css" media="screen" />
|
||||
<script src="js/jquery.event.move.js"></script>
|
||||
<script src="js/jquery.twentytwenty.js"></script>
|
||||
<link rel="stylesheet" href="css/twentytwenty.css" type="text/css" media="screen" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container1" class="twentytwenty-container">
|
||||
|
|
|
|||
|
|
@ -1,205 +0,0 @@
|
|||
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
background: white;
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
|
||||
-moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
|
||||
box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
|
||||
|
||||
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
|
||||
width: 3px;
|
||||
height: 9999px;
|
||||
left: 50%;
|
||||
margin-left: -1.5px; }
|
||||
|
||||
.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
|
||||
width: 9999px;
|
||||
height: 3px;
|
||||
top: 50%;
|
||||
margin-top: -1.5px; }
|
||||
|
||||
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
|
||||
-webkit-transition-duration: 0.5s;
|
||||
-moz-transition-duration: 0.5s;
|
||||
transition-duration: 0.5s; }
|
||||
|
||||
.twentytwenty-before-label, .twentytwenty-after-label {
|
||||
-webkit-transition-property: opacity;
|
||||
-moz-transition-property: opacity;
|
||||
transition-property: opacity; }
|
||||
|
||||
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.1em; }
|
||||
|
||||
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
line-height: 38px;
|
||||
padding: 0 20px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px; }
|
||||
|
||||
.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
|
||||
top: 50%;
|
||||
margin-top: -19px; }
|
||||
|
||||
.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
|
||||
left: 50%;
|
||||
margin-left: -45px;
|
||||
text-align: center;
|
||||
width: 90px; }
|
||||
|
||||
.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 6px inset transparent;
|
||||
position: absolute; }
|
||||
|
||||
.twentytwenty-left-arrow, .twentytwenty-right-arrow {
|
||||
top: 50%;
|
||||
margin-top: -6px; }
|
||||
|
||||
.twentytwenty-up-arrow, .twentytwenty-down-arrow {
|
||||
left: 50%;
|
||||
margin-left: -6px; }
|
||||
|
||||
.twentytwenty-container {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none; }
|
||||
.twentytwenty-container img {
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block; }
|
||||
.twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
|
||||
background: rgba(0, 0, 0, 0); }
|
||||
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
|
||||
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
|
||||
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
|
||||
opacity: 0; }
|
||||
.twentytwenty-container * {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box; }
|
||||
|
||||
.twentytwenty-before-label {
|
||||
opacity: 0; }
|
||||
.twentytwenty-before-label:before {
|
||||
content: attr(data-content); }
|
||||
|
||||
.twentytwenty-after-label {
|
||||
opacity: 0; }
|
||||
.twentytwenty-after-label:before {
|
||||
content: attr(data-content); }
|
||||
|
||||
.twentytwenty-horizontal .twentytwenty-before-label:before {
|
||||
left: 10px; }
|
||||
|
||||
.twentytwenty-horizontal .twentytwenty-after-label:before {
|
||||
right: 10px; }
|
||||
|
||||
.twentytwenty-vertical .twentytwenty-before-label:before {
|
||||
top: 10px; }
|
||||
|
||||
.twentytwenty-vertical .twentytwenty-after-label:before {
|
||||
bottom: 10px; }
|
||||
|
||||
.twentytwenty-overlay {
|
||||
-webkit-transition-property: background;
|
||||
-moz-transition-property: background;
|
||||
transition-property: background;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
z-index: 25; }
|
||||
.twentytwenty-overlay:hover {
|
||||
background: rgba(0, 0, 0, 0.5); }
|
||||
.twentytwenty-overlay:hover .twentytwenty-after-label {
|
||||
opacity: 1; }
|
||||
.twentytwenty-overlay:hover .twentytwenty-before-label {
|
||||
opacity: 1; }
|
||||
|
||||
.twentytwenty-before {
|
||||
z-index: 20; }
|
||||
|
||||
.twentytwenty-after {
|
||||
z-index: 10; }
|
||||
|
||||
.twentytwenty-handle {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -22px;
|
||||
margin-top: -22px;
|
||||
border: 3px solid white;
|
||||
-webkit-border-radius: 1000px;
|
||||
-moz-border-radius: 1000px;
|
||||
border-radius: 1000px;
|
||||
-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
|
||||
-moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
|
||||
box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
|
||||
z-index: 40;
|
||||
cursor: pointer; }
|
||||
|
||||
.twentytwenty-horizontal .twentytwenty-handle:before {
|
||||
bottom: 50%;
|
||||
margin-bottom: 22px;
|
||||
-webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
||||
-moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
||||
box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
|
||||
.twentytwenty-horizontal .twentytwenty-handle:after {
|
||||
top: 50%;
|
||||
margin-top: 22px;
|
||||
-webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
||||
-moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
||||
box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
|
||||
|
||||
.twentytwenty-vertical .twentytwenty-handle:before {
|
||||
left: 50%;
|
||||
margin-left: 22px;
|
||||
-webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
||||
-moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
||||
box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
|
||||
.twentytwenty-vertical .twentytwenty-handle:after {
|
||||
right: 50%;
|
||||
margin-right: 22px;
|
||||
-webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
||||
-moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
||||
box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
|
||||
|
||||
.twentytwenty-left-arrow {
|
||||
border-right: 6px solid white;
|
||||
left: 50%;
|
||||
margin-left: -17px; }
|
||||
|
||||
.twentytwenty-right-arrow {
|
||||
border-left: 6px solid white;
|
||||
right: 50%;
|
||||
margin-right: -17px; }
|
||||
|
||||
.twentytwenty-up-arrow {
|
||||
border-bottom: 6px solid white;
|
||||
top: 50%;
|
||||
margin-top: -17px; }
|
||||
|
||||
.twentytwenty-down-arrow {
|
||||
border-top: 6px solid white;
|
||||
bottom: 50%;
|
||||
margin-bottom: -17px; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue