-
Notifications
You must be signed in to change notification settings - Fork 295
/
index.html
75 lines (71 loc) · 2.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[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" />
</head>
<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-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="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="js/jquery.event.move.js"></script>
<script src="js/jquery.twentytwenty.js"></script>
<script>
$(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>