| (function($){ |
| |
| $.fn.twentytwenty = function(options) { |
| var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, 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>"); |
| 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"); |
| var beforeLabel = $("<div class='twentytwenty-before-label'><label>" + (beforeImg.attr('title') || "Before") + "</label></div>"); |
| var afterLabel = $("<div class='twentytwenty-after-label'><label>" + (afterImg.attr('title') || "After") + "</label></div>"); |
| overlay.append(beforeLabel); |
| overlay.append(afterLabel); |
| |
| 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)"); |
| } |
| else { |
| beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)"); |
| if (parseInt(offset.cw) < 100) { |
| beforeLabel.css('opacity', 0); |
| } |
| else { |
| beforeLabel.css('opacity', 1); |
| } |
| if ((parseInt(offset.w) - parseInt(offset.cw)) < 100) { |
| afterLabel.css('opacity', 0); |
| } |
| else { |
| afterLabel.css('opacity', 1); |
| } |
| } |
| 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); |