Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not only target images #27

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions css/twentytwenty.css
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
158 changes: 98 additions & 60 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,67 +6,105 @@
<!--[if IE 9 ]> <html class="lt-ie10" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>twentytwenty</title>
<link href="css/foundation.css" rel="stylesheet" type="text/css" />
<link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>twentytwenty</title>
<link href="css/foundation.css" rel="stylesheet" type="text/css" />
<link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />
</head>
<body>
<body>

<div class="row" style="margin-top: 2em;">
<div class="large-4 columns">
<h3>Basic Usage</h3>
<p>Demonstrates basic usage of the plugin.</p>
</div>
<div class="large-8 columns">
<div class="twentytwenty-container">
<img src="img/1_1.jpg" />
<img src="img/1_2.jpg" />
</div>
</div>
</div>
<div class="row" style="margin-top: 2em; margin-bottom: 2em;">
<div class="large-4 columns">
<h3>Vertical Orientation</h3>
<p>Demonstrates sliding up and down.</p>
</div>
<div class="large-8 columns">
<div class="twentytwenty-container" data-orientation="vertical">
<img src="img/1_1.jpg" />
<img src="img/1_2.jpg" />
</div>
</div>
</div>
<div class="row" style="margin-top: 2em;">
<div class="large-4 columns">
<h3>Basic Usage</h3>
<p>Demonstrates basic usage of the plugin.</p>
</div>
<div class="large-8 columns">
<div class="twentytwenty-container">
<img src="img/1_1.jpg" />
<img src="img/1_2.jpg" />
</div>
</div>
</div>
<div class="row" style="margin-top: 2em; margin-bottom: 2em;">
<div class="large-4 columns">
<h3>Vertical Orientation</h3>
<p>Demonstrates sliding up and down.</p>
</div>
<div class="large-8 columns">
<div class="twentytwenty-container" data-orientation="vertical">
<img src="img/1_1.jpg" />
<img src="img/1_2.jpg" />
</div>
</div>
</div>

<div class="row" style="margin-bottom: 2em;">
<div class="large-4 columns">
<h3>Side by side</h3>
<p>Using multiple comparisons at once.</p>
</div>
<div class="large-4 columns">
<div class="twentytwenty-container">
<img src="img/2_1.jpg" />
<img src="img/2_2.jpg" />
</div>
</div>
<div class="large-4 columns">
<div class="twentytwenty-container">
<img src="img/3_1.jpg" />
<img src="img/3_2.jpg" />
</div>
</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/jquery.event.move.js"></script>
<script src="js/jquery.twentytwenty.js"></script>
<script>
$(window).load(function(){
$(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
$(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
});
</script>
</body>
<div class="row" style="margin-bottom: 2em;">
<div class="large-4 columns">
<h3>Side by side</h3>
<p>Using multiple comparisons at once.</p>
</div>
<div class="large-4 columns">
<div class="twentytwenty-container">
<img src="img/2_1.jpg" />
<img src="img/2_2.jpg" />
</div>
</div>
<div class="large-4 columns">
<div class="twentytwenty-container">
<img src="img/3_1.jpg" />
<img src="img/3_2.jpg" />
</div>
</div>
</div>

<div class="row" style="margin-top: 2em; margin-bottom: 2em;">
<div class="large-4 columns">
<h3>Basic DIV</h3>
<p>Demonstrates sliding up and down.</p>
</div>
<div class="large-8 columns">
<div class="twentytwenty-container" data-type="div">
<div>
<h2 style="text-align: center;">Blok 1</h2>
<p>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</p>
</div>
<div>
<h2 style="text-align: center;">Blok 2</h2>
<p>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. </p>
</div>
</div>
</div>
</div>

<div class="row" style="margin-top: 2em; margin-bottom: 2em;">
<div class="large-4 columns">
<h3>DIV Vertical Orientation</h3>
<p>Demonstrates sliding up and down.</p>
</div>
<div class="large-8 columns">
<div class="twentytwenty-container" data-orientation="vertical">
<div>
<h2 style="text-align: center;">Blok 1</h2>
<p>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</p>
</div>
<div>
<h2 style="text-align: center;">Blok 2</h2>
<p>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. </p>
</div>
</div>
</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/jquery.event.move.js"></script>
<script src="js/jquery.twentytwenty.js"></script>
<script>
$(window).load(function(){
$(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
$(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
});
</script>
</body>
</html>
177 changes: 88 additions & 89 deletions js/jquery.twentytwenty.js
Original file line number Diff line number Diff line change
@@ -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("<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");
overlay.append("<div class='twentytwenty-before-label'></div>");
overlay.append("<div class='twentytwenty-after-label'></div>");
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("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
container.append("<div class='twentytwenty-overlay'></div>");
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");
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("<div class='twentytwenty-before-label'></div>");
overlay.append("<div class='twentytwenty-after-label'></div>");

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);