diff --git a/css/twentytwenty.css b/css/twentytwenty.css index cd17fd3..33df1e9 100644 --- a/css/twentytwenty.css +++ b/css/twentytwenty.css @@ -83,11 +83,14 @@ position: relative; -webkit-user-select: none; -moz-user-select: none; } - .twentytwenty-container img { - max-width: 100%; - position: absolute; - top: 0; - display: block; } + .twentytwenty-container .twentytwenty-before, + .twentytwenty-container .twentytwenty-after { + background-color: #FFF; + 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, diff --git a/index.html b/index.html index 0ee4982..594bc35 100644 --- a/index.html +++ b/index.html @@ -6,67 +6,105 @@ - - - twentytwenty - - + + + twentytwenty + + - + -
-
-

Basic Usage

-

Demonstrates basic usage of the plugin.

-
-
-
- - -
-
-
- -
-
-

Vertical Orientation

-

Demonstrates sliding up and down.

-
-
-
- - -
-
-
+
+
+

Basic Usage

+

Demonstrates basic usage of the plugin.

+
+
+
+ + +
+
+
+ +
+
+

Vertical Orientation

+

Demonstrates sliding up and down.

+
+
+
+ + +
+
+
-
-
-

Side by side

-

Using multiple comparisons at once.

-
-
-
- - -
-
-
-
- - -
-
-
- - - - - - +
+
+

Side by side

+

Using multiple comparisons at once.

+
+
+
+ + +
+
+
+
+ + +
+
+
+ +
+
+

Basic DIV

+

Demonstrates sliding up and down.

+
+
+
+
+

Blok 1

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper vel velit aliquet fermentum. Etiam eu vulputate purus. Integer mauris odio, vestibulum at turpis eget, pellentesque pellentesque turpis. Morbi scelerisque pulvinar ex ut tincidunt. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque gravida consequat nisi vitae ullamcorper. Nam suscipit tortor leo, sagittis mollis felis elementum quis. Integer facilisis tellus turpis, id rhoncus dui elementum ac. Quisque sit amet fermentum tellus

+
+
+

Blok 2

+

Praesent non leo cursus, laoreet nisi a, cursus massa. Vestibulum commodo dui urna, ac scelerisque elit viverra quis. Nunc luctus risus sit amet convallis maximus. Aenean odio metus, rhoncus consequat mattis nec, pretium efficitur lectus. Integer maximus aliquet purus. Duis vulputate venenatis placerat. Morbi condimentum, lectus non ultricies accumsan, est neque gravida nulla, ut fermentum leo velit in ligula. Nunc placerat tempor mauris a consequat. Cras est urna, dignissim et dui vel, molestie posuere urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum sit amet maximus nisl. Aliquam fringilla leo eu lectus porta, a laoreet neque rutrum. Aliquam bibendum tincidunt velit. Nullam dolor tellus, fringilla sed augue a, commodo dapibus erat.

+
+
+
+
+ +
+
+

DIV Vertical Orientation

+

Demonstrates sliding up and down.

+
+
+
+
+

Blok 1

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper vel velit aliquet fermentum. Etiam eu vulputate purus. Integer mauris odio, vestibulum at turpis eget, pellentesque pellentesque turpis. Morbi scelerisque pulvinar ex ut tincidunt. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque gravida consequat nisi vitae ullamcorper. Nam suscipit tortor leo, sagittis mollis felis elementum quis. Integer facilisis tellus turpis, id rhoncus dui elementum ac. Quisque sit amet fermentum tellus

+
+
+

Blok 2

+

Praesent non leo cursus, laoreet nisi a, cursus massa. Vestibulum commodo dui urna, ac scelerisque elit viverra quis. Nunc luctus risus sit amet convallis maximus. Aenean odio metus, rhoncus consequat mattis nec, pretium efficitur lectus. Integer maximus aliquet purus. Duis vulputate venenatis placerat. Morbi condimentum, lectus non ultricies accumsan, est neque gravida nulla, ut fermentum leo velit in ligula. Nunc placerat tempor mauris a consequat. Cras est urna, dignissim et dui vel, molestie posuere urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum sit amet maximus nisl. Aliquam fringilla leo eu lectus porta, a laoreet neque rutrum. Aliquam bibendum tincidunt velit. Nullam dolor tellus, fringilla sed augue a, commodo dapibus erat.

+
+
+
+
+ + + + + + diff --git a/js/jquery.twentytwenty.js b/js/jquery.twentytwenty.js index c9eccf9..b2e4d9d 100644 --- a/js/jquery.twentytwenty.js +++ b/js/jquery.twentytwenty.js @@ -1,103 +1,102 @@ (function($){ - $.fn.twentytwenty = function(options) { - var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options); - return this.each(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("
"); - container.append("
"); - var beforeImg = container.find("img:first"); - var afterImg = container.find("img:last"); - container.append("
"); - var slider = container.find(".twentytwenty-handle"); - slider.append(""); - slider.append(""); - container.addClass("twentytwenty-container"); - beforeImg.addClass("twentytwenty-before"); - afterImg.addClass("twentytwenty-after"); - - var overlay = container.find(".twentytwenty-overlay"); - overlay.append("
"); - overlay.append("
"); + 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'; - 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 before = container.children().eq(0); + var after = container.children().eq(1); + container.wrap("
"); + container.append("
"); + container.append("
"); + var slider = container.find(".twentytwenty-handle"); + slider.append(""); + slider.append(""); + container.addClass("twentytwenty-container"); + before.addClass("twentytwenty-before"); + after.addClass("twentytwenty-after"); - 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)"); - } - container.css("height", offset.h); - }; + var overlay = container.find(".twentytwenty-overlay"); + overlay.append("
"); + overlay.append("
"); - var adjustSlider = function(pct) { - var offset = calcOffset(pct); - slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw); - adjustContainer(offset); - } + var calcOffset = function(dimensionPct) { + var w = before.width(); + var h = before.height(); + return { + w: w+"px", + h: h+"px", + cw: (dimensionPct*w)+"px", + ch: (dimensionPct*h)+"px" + }; + }; - $(window).on("resize.twentytwenty", function(e) { - adjustSlider(sliderPct); - }); + var adjustContainer = function(offset) { + if (sliderOrientation === 'vertical') { + before.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)"); + } + else { + before.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)"); + } + container.css("height", offset.h); + }; - var offsetX = 0; - var imgWidth = 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(); - }); + var adjustSlider = function(pct) { + var offset = calcOffset(pct); + slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw); + adjustContainer(offset); + } - slider.on("moveend", function(e) { - container.removeClass("active"); - }); + $(window).on("resize.twentytwenty", function(e) { + adjustSlider(sliderPct); + }); - 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); - } - }); + var offsetX = 0; + var imgWidth = 0; - container.find("img").on("mousedown", function(event) { - event.preventDefault(); - }); + 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 = before.width(); + imgHeight = before.height(); + }); - $(window).trigger("resize.twentytwenty"); - }); - }; + 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);