Skip to content

Commit e8b6bbf

Browse files
ilkerccomilkerccom
committed
First release.
0 parents  commit e8b6bbf

File tree

10 files changed

+275
-0
lines changed

10 files changed

+275
-0
lines changed

‎.DS_Store‎

6 KB
Binary file not shown.

‎README.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Cndk.BeforeAfter.Js v.0.0.1
2+
3+
It is a very simple jQuery plugin that will meet your needs.
4+
5+
![Screenshot](https://i.ibb.co/1TH9nWB/Ekran-Resmi-2020-02-28-20-30-45.png)
6+
7+
## Usage
8+
9+
#### Import Javascript Files
10+
11+
```html
12+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
13+
<script src="cndk.beforeafter.js"></script>
14+
```
15+
16+
#### Import CSS File
17+
18+
```html
19+
<link href="cndk.beforeafter.css" rel="stylesheet">
20+
```
21+
22+
#### HTML Code
23+
24+
```html
25+
<div class="beforeimagetest">
26+
<div data-type="data-type-image">
27+
<div data-type="before"><img src="images/a1.jpg"></div>
28+
<div data-type="after"><img src="images/a2.jpg"></div>
29+
</div>
30+
</div>
31+
```
32+
33+
#### Javascript Run Code
34+
35+
```html
36+
$(".beforeimagetest").cndkbeforeafter(
37+
{
38+
showText: false,
39+
seperatorColor: "blue",
40+
seperatorWidth: "1px",
41+
hoverEffect: false,
42+
beforeText: "BEFORE",
43+
afterText: "TEXT"
44+
}
45+
);
46+
```
47+
48+
49+
## Contributing
50+
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
51+
52+
Please make sure to update tests as appropriate.
53+
54+
## License
55+
[MIT](https://choosealicense.com/licenses/mit/)

‎cndk.beforeafter.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.cndkbeforeafter { overflow: hidden; position: relative; transition: 0.5s; }
2+
.cndkbeforeafter-container { background: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; }
3+
.cndkbeforeafter-item { overflow: hidden; position: relative; }
4+
.cndkbeforeafter-item > div { height: 100%; position: absolute; }
5+
.cndkbeforeafter-item img { position: absolute; left: 0; top: 0; width: auto; height: 100%; }
6+
.cndkbeforeafter-item-before { z-index: 5; }
7+
.cndkbeforeafter-item-after { z-index: 10; }
8+
.cndkbeforeafter-seperator { width:4px; position: absolute; height: 100%; z-index: 15; left: 0; top: 0; background: white; }
9+
.cndkbeforeafter-item-before-text, .cndkbeforeafter-item-after-text { position: absolute; z-index: 14; display: inline-block; background: white; padding: 10px; }
10+
.cndkbeforeafter-item-before-text { left: 50px; bottom: 50px; }
11+
.cndkbeforeafter-item-after-text { right: 50px; bottom: 50px; }
12+
.cndkbeforeafter-hover:hover { opacity: 0.95; box-shadow: 0 0 50px #ccc; }
13+
.cndkbeforeafter-drag-transition { transition: 0.5s; }
14+
.cndkbeforeafter-hover-transition { transition: 0s; }
15+
16+
17+
@media only screen and (max-width: 600px) {
18+
.cndkbeforeafter{ width: 100% !important; }
19+
}
20+

‎cndk.beforeafter.js‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
$.fn.cndkbeforeafter = function(options) {
2+
3+
// Default settings
4+
var settings = $.extend({
5+
mode: "hover", /* hover,drag */
6+
showText: true,
7+
beforeText: "BEFORE",
8+
afterText: "AFTER",
9+
seperatorWidth: "4px",
10+
seperatorColor: "#ffffff",
11+
hoverEffect: true,
12+
}, options);
13+
14+
// One or multlple
15+
if(this.length > 0)
16+
{
17+
this.each(function() {
18+
19+
// Get contents
20+
var count = $(this).find(">div").length;
21+
if(count <= 1)
22+
{
23+
// No images
24+
console.log("No before-after images found.");
25+
}
26+
27+
// Continue
28+
var root = $(this);
29+
root.addClass("cndkbeforeafter cndkbeforeafter-root");
30+
root.append("<div class='cndkbeforeafter-seperator' style='width:"+settings.seperatorWidth+" ;background:"+settings.seperatorColor+"'></div>");
31+
32+
// Container
33+
root.append("<div class='cndkbeforeafter-container'></div>");
34+
35+
// Hover Effect
36+
if(settings.hoverEffect == true)
37+
{
38+
root.addClass("cndkbeforeafter-hover");
39+
}
40+
41+
// Before-After text
42+
if(settings.showText == true)
43+
{
44+
root.append("<div class='cndkbeforeafter-item-before-text'>"+settings.beforeText+"</div>");
45+
root.append("<div class='cndkbeforeafter-item-after-text'>"+settings.afterText+"</div>");
46+
}
47+
48+
for(i=0; i<count; i++)
49+
{
50+
// Before
51+
var div1 = $(this).find(">div").eq(i).find('div[data-type="before"]');
52+
var img1 = $(this).find(">div").eq(i).find('div[data-type="before"] img');
53+
img1.addClass("cndkbeforeafter-item-before");
54+
div1.addClass("cndkbeforeafter-item-before-c");
55+
div1.css("overflow","hidden");
56+
div1.css("z-index","2");
57+
58+
// After
59+
var div2 = $(this).find(">div").eq(i).find('div[data-type="after"]');
60+
var img2 = $(this).find(">div").eq(i).find('div[data-type="after"] img');
61+
img2.addClass("cndkbeforeafter-item-after");
62+
div2.addClass("cndkbeforeafter-item-after-c");
63+
div2.css("z-index","1");
64+
65+
66+
// Image-Item width/height
67+
var itemwidth = img1.width();
68+
var itemheight = img1.height();
69+
70+
// Screen width
71+
var screenWidth = $(this).parent().width();
72+
if(screenWidth < itemwidth)
73+
{
74+
itemheight = itemheight/(itemwidth/screenWidth);
75+
itemwidth = screenWidth;
76+
img1.css("width", itemwidth + "px");
77+
img2.css("width", itemwidth + "px");
78+
}
79+
80+
// Item
81+
$(this).find(">div").eq(i).addClass("cndkbeforeafter-item");
82+
$(this).find(">div").eq(i).css("height",itemheight + "px");
83+
84+
// Start position
85+
div1.css("width","50%");
86+
div2.css("width","50%");
87+
$(".cndkbeforeafter-seperator").css("left","50%");
88+
89+
// Root inline
90+
root.css("width",itemwidth + "px");
91+
root.css("height",itemheight + "px");
92+
}
93+
94+
if(settings.mode == "hover")
95+
{
96+
$(".cndkbeforeafter-seperator, .cndkbeforeafter-item > div").addClass("cndkbeforeafter-hover-transition");
97+
$(root).mousemove(function(e){
98+
var parentOffset = $(this).parent().offset();
99+
var mouseX = parseInt((e.pageX - parentOffset.left));
100+
var mousePercent = (mouseX*100)/parseInt(root.width());
101+
$(this).find(".cndkbeforeafter-item-before-c").css("width",mousePercent+"%");
102+
$(this).find(".cndkbeforeafter-item-after-c").css("width",(100-mousePercent)+"%");
103+
$(this).find(".cndkbeforeafter-seperator").css("left",mousePercent+"%");
104+
}).mouseleave(function(){
105+
$(this).find(".cndkbeforeafter-item-after-c").css("width","50%");
106+
$(this).find(".cndkbeforeafter-item-before-c").css("width","50%");
107+
$(this).find(".cndkbeforeafter-seperator").css("left","50%");
108+
});
109+
}
110+
else if(settings.mode == "drag")
111+
{
112+
$(".cndkbeforeafter-seperator, .cndkbeforeafter-item > div").addClass("cndkbeforeafter-drag-transition");
113+
$(".cndkbeforeafter-seperator").draggable();
114+
$(root).click(function(e){
115+
var parentOffset = $(this).parent().offset();
116+
var mouseX = parseInt((e.pageX - parentOffset.left));
117+
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)+"%");
120+
$(this).find(".cndkbeforeafter-seperator").css("left",mousePercent+"%");
121+
});
122+
}
123+
124+
$( window ).resize(function() {
125+
126+
});
127+
});
128+
}
129+
};

‎demo.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>cndk.beforeafter.js</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<link href="cndk.beforeafter.css" rel="stylesheet">
7+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
8+
<script src="cndk.beforeafter.js"></script>
9+
<script>
10+
$(document).ready(function () {
11+
$(".beforeafterimageitem").cndkbeforeafter();
12+
$(".beforeafterimageitemv2").cndkbeforeafter(
13+
{
14+
showText: false,
15+
seperatorColor: "blue",
16+
seperatorWidth: "1px",
17+
hoverEffect: false,
18+
beforeText: "ONCESI",
19+
afterText: "SONRASI"
20+
}
21+
);
22+
});
23+
</script>
24+
</head>
25+
26+
<body>
27+
28+
<h1>Simple Before-After Plugin for JQuery by Ilker Cindik</h1>
29+
<hr>
30+
31+
<h2>DEFAULT</h2>
32+
<div class="beforeafterimageitem">
33+
<div data-type="data-type-image">
34+
<div data-type="before"><img src="images/a1.jpg"></div>
35+
<div data-type="after"><img src="images/a2.jpg"></div>
36+
</div>
37+
</div>
38+
39+
<h2>ANOTHER</h2>
40+
<div class="beforeafterimageitem">
41+
<div data-type="data-type-image">
42+
<div data-type="before"><img src="images/b1.jpg"></div>
43+
<div data-type="after"><img src="images/b2.jpg"></div>
44+
</div>
45+
</div>
46+
47+
<hr>
48+
49+
<div style="width:400px;">
50+
<h2>AUTO-SIZE</h2>
51+
<div class="beforeafterimageitem">
52+
<div data-type="data-type-image">
53+
<div data-type="before"><img src="images/a1.jpg"></div>
54+
<div data-type="after"><img src="images/a2.jpg"></div>
55+
</div>
56+
</div>
57+
</div>
58+
59+
<hr>
60+
61+
<h2>OPTIONS</h2>
62+
<div class="beforeafterimageitemv2">
63+
<div data-type="data-type-image">
64+
<div data-type="before"><img src="images/a1.jpg"></div>
65+
<div data-type="after"><img src="images/a2.jpg"></div>
66+
</div>
67+
</div>
68+
69+
</body>
70+
71+
</html>

‎images/.DS_Store‎

6 KB
Binary file not shown.

‎images/a1.jpg‎

139 KB
Loading

‎images/a2.jpg‎

120 KB
Loading

‎images/b1.jpg‎

57.9 KB
Loading

‎images/b2.jpg‎

75 KB
Loading

0 commit comments

Comments
 (0)