Skip to content

Commit 610fceb

Browse files
ilkerccomilkerccom
committed
Demo page updated.
1 parent 63c19cc commit 610fceb

File tree

7 files changed

+220
-43
lines changed

7 files changed

+220
-43
lines changed

‎cndk.beforeafter.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,16 @@
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; }
8+
.cndkbeforeafter-seperator { width:4px; position: absolute; height: 100%; z-index: 15; left: 0; top: 0; background: white; cursor: col-resize; }
99
.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; }
1010
.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; }
1111
.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; }
1212
.cndkbeforeafter-item-before-text, .cndkbeforeafter-item-after-text { position: absolute; z-index: 14; display: inline-block; background: white; padding: 10px; }
1313
.cndkbeforeafter-item-before-text { left: 50px; bottom: 50px; }
1414
.cndkbeforeafter-item-after-text { right: 50px; bottom: 50px; }
15+
.cndkbeforeafter-extra-small-text { padding: 5px !important; font-size: 11px !important; bottom: 0; }
16+
.cndkbeforeafter-extra-small-text-before { left: 0; }
17+
.cndkbeforeafter-extra-small-text-after { right: 0; }
1518
.cndkbeforeafter-hover:hover { opacity: 0.95; box-shadow: 0 0 50px #ccc; }
1619
.cndkbeforeafter-drag-transition { transition: 0.5s; }
1720
.cndkbeforeafter-hover-transition { transition: 0s; }

‎cndk.beforeafter.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ $.fn.cndkbeforeafter = function(options) {
22

33
// Default settings
44
var settings = $.extend({
5-
mode: "drag", /* hover,drag */
5+
mode: "hover", /* hover,drag */
66
showText: true,
77
beforeText: "BEFORE",
88
afterText: "AFTER",
@@ -90,6 +90,13 @@ $.fn.cndkbeforeafter = function(options) {
9090
$(this).find(">div").eq(0).addClass("cndkbeforeafter-item");
9191
$(this).find(">div").eq(0).css("height",itemheight + "px");
9292

93+
// Small Before-After text
94+
if(itemwidth < 200)
95+
{
96+
$(this).find(".cndkbeforeafter-item-after-text").addClass("cndkbeforeafter-extra-small-text cndkbeforeafter-extra-small-text-after");
97+
$(this).find(".cndkbeforeafter-item-before-text").addClass("cndkbeforeafter-extra-small-text cndkbeforeafter-extra-small-text-before");
98+
}
99+
93100
// Start position
94101
div1.css("width","50%");
95102
div2.css("width","50%");

‎demo.html‎

Lines changed: 208 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,32 @@
33
<head>
44
<title>cndk.beforeafter.js</title>
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6-
<link href="cndk.beforeafter.css" rel="stylesheet">
6+
7+
<!-- for demo page only -->
8+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
79
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
10+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
11+
12+
<!-- cndk.beforeafter.js -->
13+
<link href="cndk.beforeafter.css" rel="stylesheet">
814
<script src="cndk.beforeafter.js"></script>
915
<script>
1016
$(document).ready(function () {
11-
$(".beforeafterimageitem").cndkbeforeafter();
12-
$(".beforeafterimageitemv2").cndkbeforeafter(
17+
$(".beforeafterdefault").cndkbeforeafter();
18+
$(".beforeafterdrag").cndkbeforeafter(
19+
{
20+
mode: "drag"
21+
}
22+
);
23+
$(".beforeafterhidetext").cndkbeforeafter(
24+
{
25+
showText: false
26+
}
27+
);
28+
$(".beforeafterimageseperator").cndkbeforeafter(
1329
{
14-
showText: false,
1530
seperatorColor: "blue",
16-
seperatorWidth: "1px",
17-
hoverEffect: false,
18-
beforeText: "ONCESI",
19-
afterText: "SONRASI"
31+
seperatorWidth: "15px",
2032
}
2133
);
2234
});
@@ -25,46 +37,201 @@
2537

2638
<body>
2739

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>
40+
<header>
41+
<div class="navbar navbar-dark bg-dark shadow-sm">
42+
<div class="container d-flex justify-content-between">
43+
<a href="#" class="navbar-brand d-flex align-items-center">
44+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
45+
<strong>cndk.beforeafter.js</strong>
46+
</a>
47+
</div>
3648
</div>
37-
</div>
49+
</header>
50+
51+
<main role="main">
52+
53+
<section class="jumbotron text-center">
54+
<div class="container">
55+
<h1>cndk.beforeafter.js</h1>
56+
<p class="lead text-muted">
57+
Before-After Plugin for jQuery
58+
</p>
59+
<p>
60+
<a href="https://github.com/ilkerccom/cndkbeforeafter" class="btn btn-primary my-2">Explore on GitHub</a>
61+
</p>
62+
</div>
63+
</section>
64+
65+
<div class="album py-5 bg-light">
66+
<div class="container">
3867

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>
68+
<div class="row" style="margin-top: 50px;">
69+
<div class="col-md-12">
70+
<h1 class="display-4">Default Settings</h1>
71+
<p>Default settings</p>
72+
<code >
73+
mode: "hover",<br>
74+
showText: true,<br>
75+
beforeText: "BEFORE",<br>
76+
afterText: "AFTER",<br>
77+
seperatorWidth: "5px",<br>
78+
seperatorColor: "#ffffff",<br>
79+
hoverEffect: true,
80+
</code>
81+
</div>
82+
</div>
83+
84+
<div class="row" style="margin-top: 50px;">
85+
<div class="col-md-12">
86+
<h1 class="display-4">Default</h1>
87+
<p>With default settings.</p>
88+
<code >
89+
$(".beforeafterdefault").cndkbeforeafter();
90+
</code>
91+
<div class="card" style="margin-top: 50px;">
92+
<div class="beforeafterdefault">
93+
<div data-type="data-type-image">
94+
<div data-type="before"><img src="images/a1.jpg"></div>
95+
<div data-type="after"><img src="images/a2.jpg"></div>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
</div>
46101

47-
<hr>
102+
<div class="row" style="margin-top: 50px;">
103+
<div class="col-md-12">
104+
<h1 class="display-4">Mode : drag</h1>
105+
<p>With default settings.</p>
106+
<code >
107+
$(".beforeafterdrag").cndkbeforeafter(
108+
{
109+
mode: "drag"
110+
}
111+
);
112+
</code>
113+
<div class="card" style="margin-top: 50px;">
114+
<div class="beforeafterdrag">
115+
<div data-type="data-type-image">
116+
<div data-type="before"><img src="images/a1.jpg"></div>
117+
<div data-type="after"><img src="images/a2.jpg"></div>
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
48123

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>
124+
<div class="row" style="margin-top: 50px;">
125+
<div class="col-md-12">
126+
<h1 class="display-4">Seperator Style</h1>
127+
<p>With default settings.</p>
128+
<code >
129+
$(".beforeafterdrag").cndkbeforeafter(<br>
130+
{<br>
131+
seperatorColor: "blue",<br>
132+
seperatorWidth: "15px",<br>
133+
}<br>
134+
);
135+
</code>
136+
<div class="card" style="margin-top: 50px;">
137+
<div class="beforeafterimageseperator">
138+
<div data-type="data-type-image">
139+
<div data-type="before"><img src="images/a1.jpg"></div>
140+
<div data-type="after"><img src="images/a2.jpg"></div>
141+
</div>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
58146

59-
<hr>
147+
<div class="row" style="margin-top: 50px;">
148+
<div class="col-md-12">
149+
<h1 class="display-4">Hide Text</h1>
150+
<p>With default settings.</p>
151+
<code >
152+
$(".beforeafterdrag").cndkbeforeafter(<br>
153+
{<br>
154+
showText: false<br>
155+
}<br>
156+
);
157+
</code>
158+
<div class="card" style="margin-top: 50px;">
159+
<div class="beforeafterhidetext">
160+
<div data-type="data-type-image">
161+
<div data-type="before"><img src="images/a1.jpg"></div>
162+
<div data-type="after"><img src="images/a2.jpg"></div>
163+
</div>
164+
</div>
165+
</div>
166+
</div>
167+
</div>
60168

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>
169+
<div class="row" style="margin-top: 50px;">
170+
<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>
217+
</div>
218+
</div>
219+
</div>
220+
221+
222+
</div>
223+
</div>
224+
225+
</main>
226+
227+
<footer class="text-muted">
228+
<div class="container">
229+
<p class="float-right">
230+
<a href="#">Back to top</a>
231+
</p>
232+
<p>by Ilker Cindik</p>
66233
</div>
67-
</div>
234+
</footer>
68235

69236
</body>
70237

‎images/b1.jpg‎

696 KB
Loading

‎images/b2.jpg‎

674 KB
Loading

‎images/c1.jpg‎

485 KB
Loading

‎images/c2.jpg‎

558 KB
Loading

0 commit comments

Comments
 (0)