73 lines
2.5 KiB
HTML
73 lines
2.5 KiB
HTML
<!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-no-compass.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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
|
|
<script src="js/jquery.event.move.js"></script>
|
|
<script src="js/jquery.twentytwenty.js"></script>
|
|
<script>
|
|
$(window).load(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>
|