Skip to content

Commit 5ff59fa

Browse files
ilkerccomilkerccom
committed
Drag option.
1 parent e8b6bbf commit 5ff59fa

File tree

2 files changed

+55
-17
lines changed

2 files changed

+55
-17
lines changed

‎cndk.beforeafter.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
.cndkbeforeafter-item-before { z-index: 5; }
77
.cndkbeforeafter-item-after { z-index: 10; }
88
.cndkbeforeafter-seperator { width:4px; position: absolute; height: 100%; z-index: 15; left: 0; top: 0; background: white; }
9+
.cndkbeforeafter-seperator > div > span { cursor: pointer; position: absolute; width: 60px; height: 60px; background: white; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; border-radius: 30px; }
10+
.cndkbeforeafter-seperator > div > span::after { content: ""; border: solid #3c3c3c; border-width: 0 7px 7px 0; display: inline-block; padding: 6px; transform: rotate(135deg); -webkit-transform: rotate(135deg); top: 50%; position: absolute; margin-top: -10px; left: 0; margin-left: 10px; }
11+
.cndkbeforeafter-seperator > div > span::before { content: ""; border: solid #3c3c3c; border-width: 7px 0 0 7px; display: inline-block; padding: 6px; transform: rotate(135deg); -webkit-transform: rotate(135deg); top: 50%; position: absolute; margin-top: -10px; right: 0; margin-right: 10px; }
912
.cndkbeforeafter-item-before-text, .cndkbeforeafter-item-after-text { position: absolute; z-index: 14; display: inline-block; background: white; padding: 10px; }
1013
.cndkbeforeafter-item-before-text { left: 50px; bottom: 50px; }
1114
.cndkbeforeafter-item-after-text { right: 50px; bottom: 50px; }

‎cndk.beforeafter.js‎

Lines changed: 52 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,36 @@ $.fn.cndkbeforeafter = function(options) {
22

33
// Default settings
44
var settings = $.extend({
5-
mode: "hover", /* hover,drag */
5+
mode: "drag", /* hover,drag */
66
showText: true,
77
beforeText: "BEFORE",
88
afterText: "AFTER",
9-
seperatorWidth: "4px",
9+
seperatorWidth: "5px",
1010
seperatorColor: "#ffffff",
1111
hoverEffect: true,
1212
}, options);
1313

14-
// One or multlple
15-
if(this.length > 0)
14+
// This
15+
var element = this;
16+
17+
// Wait for image(s) loading
18+
var img = new Image();
19+
img.src = $(this).find(">div").eq(0).find('div[data-type="before"] img').attr("src");
20+
img.onload = function() {
21+
runCndkBeforeAfter(element);
22+
};
23+
24+
// Run Plugin
25+
function runCndkBeforeAfter(element)
1626
{
17-
this.each(function() {
27+
element.each(function() {
1828

1929
// Get contents
20-
var count = $(this).find(">div").length;
30+
var count = $(this).find(">div>div").length;
2131
if(count <= 1)
2232
{
2333
// No images
24-
console.log("No before-after images found.");
34+
console.log("(cndk.beforeafter.js) Error -> No before-after images found.");
2535
}
2636

2737
// Continue
@@ -61,7 +71,6 @@ $.fn.cndkbeforeafter = function(options) {
6171
img2.addClass("cndkbeforeafter-item-after");
6272
div2.addClass("cndkbeforeafter-item-after-c");
6373
div2.css("z-index","1");
64-
6574

6675
// Image-Item width/height
6776
var itemwidth = img1.width();
@@ -78,8 +87,8 @@ $.fn.cndkbeforeafter = function(options) {
7887
}
7988

8089
// Item
81-
$(this).find(">div").eq(i).addClass("cndkbeforeafter-item");
82-
$(this).find(">div").eq(i).css("height",itemheight + "px");
90+
$(this).find(">div").eq(0).addClass("cndkbeforeafter-item");
91+
$(this).find(">div").eq(0).css("height",itemheight + "px");
8392

8493
// Start position
8594
div1.css("width","50%");
@@ -93,9 +102,9 @@ $.fn.cndkbeforeafter = function(options) {
93102

94103
if(settings.mode == "hover")
95104
{
96-
$(".cndkbeforeafter-seperator, .cndkbeforeafter-item > div").addClass("cndkbeforeafter-hover-transition");
105+
$(root).find(".cndkbeforeafter-seperator, .cndkbeforeafter-item > div").addClass("cndkbeforeafter-hover-transition");
97106
$(root).mousemove(function(e){
98-
var parentOffset = $(this).parent().offset();
107+
var parentOffset = $(this).offset();
99108
var mouseX = parseInt((e.pageX - parentOffset.left));
100109
var mousePercent = (mouseX*100)/parseInt(root.width());
101110
$(this).find(".cndkbeforeafter-item-before-c").css("width",mousePercent+"%");
@@ -109,16 +118,42 @@ $.fn.cndkbeforeafter = function(options) {
109118
}
110119
else if(settings.mode == "drag")
111120
{
112-
$(".cndkbeforeafter-seperator, .cndkbeforeafter-item > div").addClass("cndkbeforeafter-drag-transition");
113-
$(".cndkbeforeafter-seperator").draggable();
121+
$(root).find(".cndkbeforeafter-seperator, .cndkbeforeafter-item > div").addClass("cndkbeforeafter-drag-transition");
114122
$(root).click(function(e){
115-
var parentOffset = $(this).parent().offset();
123+
var parentOffset = $(this).offset();
116124
var mouseX = parseInt((e.pageX - parentOffset.left));
117125
var mousePercent = (mouseX*100)/parseInt(root.width());
118-
$(this).find(".cndkbeforeafter-item-after-c").css("width",mousePercent+"%");
119-
$(this).find(".cndkbeforeafter-item-before-c").css("width",(100-mousePercent)+"%");
126+
$(this).find(".cndkbeforeafter-item-before-c").css("width",mousePercent+"%");
127+
$(this).find(".cndkbeforeafter-item-after-c").css("width",(100-mousePercent)+"%");
120128
$(this).find(".cndkbeforeafter-seperator").css("left",mousePercent+"%");
121129
});
130+
131+
// Draggable seperator
132+
var isSliding = false;
133+
var currentElement = (root);
134+
currentElement.find(".cndkbeforeafter-seperator").on("mousedown",function(e){
135+
isSliding = true;
136+
currentElement.find(".cndkbeforeafter-seperator, .cndkbeforeafter-item > div").removeClass("cndkbeforeafter-drag-transition");
137+
currentElement.mousemove(function(e){
138+
if(isSliding) {
139+
var parentOffset = currentElement.offset();
140+
var mouseX = parseInt((e.pageX - parentOffset.left));
141+
var mousePercent = (mouseX*100)/parseInt(root.width());
142+
currentElement.find(".cndkbeforeafter-item-before-c").css("width",mousePercent+"%");
143+
currentElement.find(".cndkbeforeafter-item-after-c").css("width",(100-mousePercent)+"%");
144+
currentElement.find(".cndkbeforeafter-seperator").css("left",mousePercent+"%");
145+
}
146+
});
147+
});
148+
149+
// Release
150+
currentElement.find(".cndkbeforeafter-seperator").on("mouseup",function(e){
151+
isSliding = false;
152+
currentElement.find(".cndkbeforeafter-seperator, .cndkbeforeafter-item > div").addClass("cndkbeforeafter-drag-transition");
153+
});
154+
155+
// Add visual to seperator
156+
currentElement.find(".cndkbeforeafter-seperator").append("<div><span></span></div>");
122157
}
123158

124159
$( window ).resize(function() {

0 commit comments

Comments
 (0)