Skip to content

Commit a709994

Browse files
ilkerccomilkerccom
committed
Mobile device support.
1 parent 610fceb commit a709994

File tree

10 files changed

+56
-64
lines changed

10 files changed

+56
-64
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
# Cndk.BeforeAfter.Js v.0.0.1
1+
# Cndk.BeforeAfter.Js v.0.0.2
22

33
It is a very simple jQuery plugin that will meet your needs.
44

5-
![Screenshot](https://i.ibb.co/1TH9nWB/Ekran-Resmi-2020-02-28-20-30-45.png)
5+
![Screenshot](https://i.ibb.co/9bCgWzc/Ekran-Resmi-2020-02-29-21-36-37.png)
66

77
## Demo
88

‎cndk.beforeafter.css‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@
55
.cndkbeforeafter-item img { position: absolute; left: 0; top: 0; width: auto; height: 100%; }
66
.cndkbeforeafter-item-before { z-index: 5; }
77
.cndkbeforeafter-item-after { z-index: 10; }
8-
.cndkbeforeafter-seperator { width:4px; position: absolute; height: 100%; z-index: 15; left: 0; top: 0; background: white; cursor: col-resize; }
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; }
12-
.cndkbeforeafter-item-before-text, .cndkbeforeafter-item-after-text { position: absolute; z-index: 14; display: inline-block; background: white; padding: 10px; }
13-
.cndkbeforeafter-item-before-text { left: 50px; bottom: 50px; }
14-
.cndkbeforeafter-item-after-text { right: 50px; bottom: 50px; }
8+
.cndkbeforeafter-seperator { width:4px; position: absolute; height: 100%; z-index: 15; left: 0; top: 0; background: black; cursor: col-resize; }
9+
.cndkbeforeafter-seperator > div > span { transition: 0.25s; cursor: pointer; position: absolute; width: 60px; height: 60px; border:3px solid black; background: white; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; border-radius: 30px; }
10+
.cndkbeforeafter-seperator > div > span::after { content: ""; border: solid #9e9e9e; 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 #9e9e9e; 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; }
12+
.cndkbeforeafter-seperator:hover > div > span, .cndkbeforeafter-seperator:active > div > span { background: black; }
13+
.cndkbeforeafter-seperator:active { box-shadow: 0 0 35px #000; }
14+
.cndkbeforeafter-item-before-text, .cndkbeforeafter-item-after-text { position: absolute; z-index: 14; display: inline-block; background: rgba(0, 0, 0, 0.6); color:#fff; padding: 10px; }
15+
.cndkbeforeafter-top-left { left:0; top: 0; }
16+
.cndkbeforeafter-top-right { right:0; top: 0; }
17+
.cndkbeforeafter-bottom-left { left:0; bottom: 0; }
18+
.cndkbeforeafter-bottom-right { right:0; bottom: 0; }
1519
.cndkbeforeafter-extra-small-text { padding: 5px !important; font-size: 11px !important; bottom: 0; }
1620
.cndkbeforeafter-extra-small-text-before { left: 0; }
1721
.cndkbeforeafter-extra-small-text-after { right: 0; }

‎cndk.beforeafter.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ $.fn.cndkbeforeafter = function(options) {
55
mode: "hover", /* hover,drag */
66
showText: true,
77
beforeText: "BEFORE",
8+
beforeTextPosition: "bottom-left", /* top-left, top-right, bottom-left, bottom-right, {x}px,{x}px */
89
afterText: "AFTER",
9-
seperatorWidth: "5px",
10-
seperatorColor: "#ffffff",
10+
afterTextPosition: "bottom-right", /* top-left, top-right, bottom-left, bottom-right, {x}px,{x}px */
11+
seperatorWidth: "4px",
12+
seperatorColor: "#000000",
1113
hoverEffect: true,
1214
}, options);
1315

@@ -51,8 +53,10 @@ $.fn.cndkbeforeafter = function(options) {
5153
// Before-After text
5254
if(settings.showText == true)
5355
{
54-
root.append("<div class='cndkbeforeafter-item-before-text'>"+settings.beforeText+"</div>");
55-
root.append("<div class='cndkbeforeafter-item-after-text'>"+settings.afterText+"</div>");
56+
var dataBeforeTitle = $(this).find(">div").eq(0).find('div[data-type="before"]').attr("data-title") == undefined ? settings.beforeText : $(this).find(">div").eq(0).find('div[data-type="before"]').attr("data-title");
57+
var dataAfterTitle = $(this).find(">div").eq(0).find('div[data-type="after"]').attr("data-title") == undefined ? settings.afterText : $(this).find(">div").eq(0).find('div[data-type="after"]').attr("data-title");
58+
root.append("<div class='cndkbeforeafter-item-before-text cndkbeforeafter-"+settings.beforeTextPosition+"'>"+dataBeforeTitle+"</div>");
59+
root.append("<div class='cndkbeforeafter-item-after-text cndkbeforeafter-"+settings.afterTextPosition+"'>"+dataAfterTitle+"</div>");
5660
}
5761

5862
for(i=0; i<count; i++)
@@ -159,6 +163,20 @@ $.fn.cndkbeforeafter = function(options) {
159163
currentElement.find(".cndkbeforeafter-seperator, .cndkbeforeafter-item > div").addClass("cndkbeforeafter-drag-transition");
160164
});
161165

166+
// Mobile touch-support
167+
currentElement.find(".cndkbeforeafter-seperator").on("touchstart",function(e){
168+
isSliding = true;
169+
currentElement.find(".cndkbeforeafter-seperator, .cndkbeforeafter-item > div").removeClass("cndkbeforeafter-drag-transition");
170+
currentElement.on("touchmove",function(e){
171+
var parentOffset = currentElement.offset();
172+
var mouseX = parseInt((e.touches[0].pageX - parentOffset.left));
173+
var mousePercent = (mouseX*100)/parseInt(root.width());
174+
currentElement.find(".cndkbeforeafter-item-before-c").css("width",mousePercent+"%");
175+
currentElement.find(".cndkbeforeafter-item-after-c").css("width",(100-mousePercent)+"%");
176+
currentElement.find(".cndkbeforeafter-seperator").css("left",mousePercent+"%");
177+
});
178+
});
179+
162180
// Add visual to seperator
163181
currentElement.find(".cndkbeforeafter-seperator").append("<div><span></span></div>");
164182
}

‎demo.html‎

Lines changed: 21 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
$(".beforeafterdefault").cndkbeforeafter();
1818
$(".beforeafterdrag").cndkbeforeafter(
1919
{
20-
mode: "drag"
20+
mode: "drag",
21+
beforeTextPosition: "top-left"
2122
}
2223
);
2324
$(".beforeafterhidetext").cndkbeforeafter(
@@ -27,8 +28,8 @@
2728
);
2829
$(".beforeafterimageseperator").cndkbeforeafter(
2930
{
30-
seperatorColor: "blue",
31-
seperatorWidth: "15px",
31+
seperatorColor: "#ffffff",
32+
seperatorWidth: "10px",
3233
}
3334
);
3435
});
@@ -73,9 +74,11 @@ <h1 class="display-4">Default Settings</h1>
7374
mode: "hover",<br>
7475
showText: true,<br>
7576
beforeText: "BEFORE",<br>
77+
beforeTextPosition: "bottom-left"<br>
7678
afterText: "AFTER",<br>
77-
seperatorWidth: "5px",<br>
78-
seperatorColor: "#ffffff",<br>
79+
afterTextPosition: "bottom-right"<br>
80+
seperatorWidth: "4px",<br>
81+
seperatorColor: "#000000",<br>
7982
hoverEffect: true,
8083
</code>
8184
</div>
@@ -168,52 +171,19 @@ <h1 class="display-4">Hide Text</h1>
168171

169172
<div class="row" style="margin-top: 50px;">
170173
<div class="col-md-12">
171-
<h1 class="display-4">Other Demos</h1>
172-
<p>Other demos</p>
173-
<div class="beforeafterdefault">
174-
<div data-type="data-type-image">
175-
<div data-type="before"><img src="images/b1.jpg"></div>
176-
<div data-type="after"><img src="images/b2.jpg"></div>
177-
</div>
178-
</div>
179-
<div class="beforeafterdefault" style="margin-top: 50px;">
180-
<div data-type="data-type-image">
181-
<div data-type="before"><img src="images/c1.jpg"></div>
182-
<div data-type="after"><img src="images/c2.jpg"></div>
183-
</div>
184-
</div>
185-
</div>
186-
</div>
187-
188-
<div class="row" style="margin-top: 50px;">
189-
<div class="col-md-4">
190-
<div class="card mb-4 shadow-sm">
191-
<div class="beforeafterdefault">
192-
<div data-type="data-type-image">
193-
<div data-type="before"><img src="images/a1.jpg"></div>
194-
<div data-type="after"><img src="images/a2.jpg"></div>
195-
</div>
196-
</div>
197-
</div>
198-
</div>
199-
<div class="col-md-6">
200-
<div class="card mb-4 shadow-sm">
201-
<div class="beforeafterdefault">
202-
<div data-type="data-type-image">
203-
<div data-type="before"><img src="images/b1.jpg"></div>
204-
<div data-type="after"><img src="images/b2.jpg"></div>
205-
</div>
206-
</div>
207-
</div>
208-
</div>
209-
<div class="col-md-2">
210-
<div class="card mb-4 shadow-sm">
211-
<div class="beforeafterdefault">
212-
<div data-type="data-type-image">
213-
<div data-type="before"><img src="images/c1.jpg"></div>
214-
<div data-type="after"><img src="images/c2.jpg"></div>
215-
</div>
216-
</div>
174+
<h1 class="display-4">Attributes</h1>
175+
<p>With default settings.</p>
176+
<code >
177+
data-title="Old image"<br>
178+
data-title="This is new image"
179+
</code>
180+
<div class="card" style="margin-top: 50px;">
181+
<div class="beforeafterdefault">
182+
<div data-type="data-type-image">
183+
<div data-type="before" data-title="Old image"><img src="images/a1.jpg"></div>
184+
<div data-type="after" data-title="This is new image"><img src="images/a2.jpg"></div>
185+
</div>
186+
</div>
217187
</div>
218188
</div>
219189
</div>

‎images/.DS_Store‎

0 Bytes
Binary file not shown.

‎images/a2.jpg‎

43.3 KB
Loading

‎images/b1.jpg‎

-754 KB
Binary file not shown.

‎images/b2.jpg‎

-749 KB
Binary file not shown.

‎images/c1.jpg‎

-485 KB
Binary file not shown.

‎images/c2.jpg‎

-558 KB
Binary file not shown.

0 commit comments

Comments
 (0)