first commit
This commit is contained in:
@@ -0,0 +1,152 @@
|
||||
(function($){
|
||||
|
||||
$.fn.eatwentytwenty = function(options) {
|
||||
var options = $.extend({
|
||||
default_offset_pct: 0.5,
|
||||
orientation: 'horizontal',
|
||||
before_label: 'Before',
|
||||
after_label: 'After',
|
||||
no_overlay: false,
|
||||
move_slider_on_hover: false,
|
||||
move_with_handle_only: true,
|
||||
click_to_move: 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);
|
||||
};
|
||||
|
||||
// Return the number specified or the min/max number if it outside the range given.
|
||||
var minMaxNumber = function(num, min, max) {
|
||||
return Math.max(min, Math.min(max, num));
|
||||
};
|
||||
|
||||
// Calculate the slider percentage based on the position.
|
||||
var getSliderPercentage = function(positionX, positionY) {
|
||||
var sliderPercentage = (sliderOrientation === 'vertical') ?
|
||||
(positionY-offsetY)/imgHeight :
|
||||
(positionX-offsetX)/imgWidth;
|
||||
|
||||
return minMaxNumber(sliderPercentage, 0, 1);
|
||||
};
|
||||
|
||||
|
||||
$(window).on("resize.eatwentytwenty", function(e) {
|
||||
adjustSlider(sliderPct);
|
||||
});
|
||||
|
||||
var offsetX = 0;
|
||||
var offsetY = 0;
|
||||
var imgWidth = 0;
|
||||
var imgHeight = 0;
|
||||
var onMoveStart = 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();
|
||||
};
|
||||
var onMove = function(e) {
|
||||
if (container.hasClass("active")) {
|
||||
sliderPct = getSliderPercentage(e.pageX, e.pageY);
|
||||
adjustSlider(sliderPct);
|
||||
}
|
||||
};
|
||||
var onMoveEnd = function() {
|
||||
container.removeClass("active");
|
||||
};
|
||||
|
||||
var moveTarget = options.move_with_handle_only ? slider : container;
|
||||
moveTarget.on("movestart",onMoveStart);
|
||||
moveTarget.on("move",onMove);
|
||||
moveTarget.on("moveend",onMoveEnd);
|
||||
|
||||
if (options.move_slider_on_hover) {
|
||||
container.on("mouseenter", onMoveStart);
|
||||
container.on("mousemove", onMove);
|
||||
container.on("mouseleave", onMoveEnd);
|
||||
}
|
||||
|
||||
slider.on("touchmove", function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
container.find("img").on("mousedown", function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
if (options.click_to_move) {
|
||||
container.on('click', function(e) {
|
||||
offsetX = container.offset().left;
|
||||
offsetY = container.offset().top;
|
||||
imgWidth = beforeImg.width();
|
||||
imgHeight = beforeImg.height();
|
||||
|
||||
sliderPct = getSliderPercentage(e.pageX, e.pageY);
|
||||
adjustSlider(sliderPct);
|
||||
});
|
||||
}
|
||||
|
||||
$(window).trigger("resize.eatwentytwenty");
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1 @@
|
||||
!function(g){g.fn.eatwentytwenty=function(m){m=g.extend({default_offset_pct:.5,orientation:"horizontal",before_label:"Before",after_label:"After",no_overlay:!1,move_slider_on_hover:!1,move_with_handle_only:!0,click_to_move:!1},m);return this.each(function(){var e=m.default_offset_pct,s=g(this),c=m.orientation,t="vertical"===c?"down":"left",n="vertical"===c?"up":"right";s.wrap("<div class='twentytwenty-wrapper twentytwenty-"+c+"'></div>"),m.no_overlay||s.append("<div class='twentytwenty-overlay'></div>");var r=s.find("img:first"),d=s.find("img:last");s.append("<div class='twentytwenty-handle'></div>");var l=s.find(".twentytwenty-handle");l.append("<span class='twentytwenty-"+t+"-arrow'></span>"),l.append("<span class='twentytwenty-"+n+"-arrow'></span>"),s.addClass("twentytwenty-container"),r.addClass("twentytwenty-before"),d.addClass("twentytwenty-after");var a=s.find(".twentytwenty-overlay");a.append("<div class='twentytwenty-before-label' data-content='"+m.before_label+"'></div>"),a.append("<div class='twentytwenty-after-label' data-content='"+m.after_label+"'></div>");function i(t){var e,n,a,i,o=(e=t,n=r.width(),a=r.height(),{w:n+"px",h:a+"px",cw:e*n+"px",ch:e*a+"px"});l.css("vertical"===c?"top":"left","vertical"===c?o.ch:o.cw),i=o,"vertical"===c?(r.css("clip","rect(0,"+i.w+","+i.ch+",0)"),d.css("clip","rect("+i.ch+","+i.w+","+i.h+",0)")):(r.css("clip","rect(0,"+i.cw+","+i.h+",0)"),d.css("clip","rect(0,"+i.w+","+i.h+","+i.cw+")")),s.css("height",i.h)}function o(t,e){var n,a,i;return n="vertical"===c?(e-y)/u:(t-p)/h,a=0,i=1,Math.max(a,Math.min(i,n))}g(window).on("resize.eatwentytwenty",function(t){i(e)});function w(t){((t.distX>t.distY&&t.distX<-t.distY||t.distX<t.distY&&t.distX>-t.distY)&&"vertical"!==c||(t.distX<t.distY&&t.distX<-t.distY||t.distX>t.distY&&t.distX>-t.distY)&&"vertical"===c)&&t.preventDefault(),s.addClass("active"),p=s.offset().left,y=s.offset().top,h=r.width(),u=r.height()}function f(t){s.hasClass("active")&&(e=o(t.pageX,t.pageY),i(e))}function v(){s.removeClass("active")}var p=0,y=0,h=0,u=0,_=m.move_with_handle_only?l:s;_.on("movestart",w),_.on("move",f),_.on("moveend",v),m.move_slider_on_hover&&(s.on("mouseenter",w),s.on("mousemove",f),s.on("mouseleave",v)),l.on("touchmove",function(t){t.preventDefault()}),s.find("img").on("mousedown",function(t){t.preventDefault()}),m.click_to_move&&s.on("click",function(t){p=s.offset().left,y=s.offset().top,h=r.width(),u=r.height(),e=o(t.pageX,t.pageY),i(e)}),g(window).trigger("resize.eatwentytwenty")})}}(jQuery);
|
||||
Reference in New Issue
Block a user