Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 4371d5c790
Fetching contributors…

Cannot retrieve contributors at this time

910 lines (800 sloc) 23.088 kb
<!DOCTYPE HTML>
<html>
<head>
<!--[if gte IE 9]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->
<!--[if lt IE 9]><meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" /><![endif]-->
<meta charset="utf-8" />
<title>Slide Deck</title>
<!--
Made by: Estelle Weyl
Based on: 5lides by Pamela Fox http://5lide-maker.appspot.com
Copyright: CC-SA-NC-BY - Creative Commons Attribution-NonCommercial-ShareAlike
-->
<style>
:root {font-size: 162.5%;}
body {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif, 'Droid Sans';
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: absolute;
left: 0px; top: 0px;
}
#info {
font-size: small;
position: absolute;
bottom: 0px;
left: 40%;
z-index: 500;
color: #fff;
}
/* optional */
#topinfo {
font-size: small;
position: absolute;
top: 5px;
right: 5px;
z-index: 500;
}
.key {
color: black;
display: inline-block;
padding: 3px 3px 3px 3px;
text-shadow: none;
letter-spacing: 0;
position: relative;
background: white;
border-radius: 5px;
font-weight: bold;
text-shadow: 0 0 1px currentColor;
}
#presentation {
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
display: block;
overflow: hidden;
background: #000;
background-image:
-webkit-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%),
-webkit-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
-webkit-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
-webkit-linear-gradient(left, transparent 50%, rgba(0,0,0,0.2) 50%),
-webkit-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
-webkit-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
-webkit-linear-gradient(left, transparent 50%, rgba(0,0,0,0.2) 50%),
-webkit-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
-webkit-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
-webkit-linear-gradient(left,
red 14%, orange 15%, orange 28%, yellow 29%, yellow 42%, green 43%, green 56%, blue 57%, blue 70%, magenta 71%, magenta 85%, purple 86%);
background-image:
-moz-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%),
-moz-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
-moz-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
-moz-linear-gradient(left, transparent 50%, rgba(0,0,0,0.2) 50%),
-moz-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
-moz-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
-moz-linear-gradient(left, transparent 50%, rgba(0,0,0,0.2) 50%),
-moz-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
-moz-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
-moz-linear-gradient(left,
red 14%, orange 15%, orange 28%, yellow 29%, yellow 42%, green 43%, green 56%, blue 57%, blue 70%, magenta 71%, magenta 85%, purple 86%);
background-image:
-ms-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%),
-ms-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
-ms-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
-ms-linear-gradient(left, transparent 50%, rgba(0,0,0,0.2) 50%),
-ms-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
-ms-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
-ms-linear-gradient(left, transparent 50%, rgba(0,0,0,0.2) 50%),
-ms-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
-ms-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
-ms-linear-gradient(left,
red 14%, orange 15%, orange 28%, yellow 29%, yellow 42%, green 43%, green 56%, blue 57%, blue 70%, magenta 71%, magenta 85%, purple 86%);
background-image:
-o-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%),
-o-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
-o-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
-o-linear-gradient(left, transparent 50%, rgba(0,0,0,0.2) 50%),
-o-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
-o-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
-o-linear-gradient(left, transparent 50%, rgba(0,0,0,0.2) 50%),
-o-linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
-o-linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
-o-linear-gradient(left,
red 14%, orange 15%, orange 28%, yellow 29%, yellow 42%, green 43%, green 56%, blue 57%, blue 70%, magenta 71%, magenta 85%, purple 86%);
background-image:
linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%),
linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
linear-gradient(left, transparent 50%, rgba(0,0,0,0.2) 50%),
linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
linear-gradient(left, transparent 50%, rgba(0,0,0,0.2) 50%),
linear-gradient(left, transparent 40%, rgba(0,0,0,0.2) 40%),
linear-gradient(left, transparent 60%, rgba(0,0,0,0.2) 60%),
linear-gradient(left,
red 14%, orange 15%, orange 28%, yellow 29%, yellow 42%, green 43%, green 56%, blue 57%, blue 70%, magenta 71%, magenta 85%, purple 86%);
-webkit-background-size: 1px 50%, 1px 50px, 32px, 120px, 80px, 60px, 90px, 110px, 70px, 500px;
-moz-background-size: 1px 50%, 1px 50px, 32px, 120px, 80px, 60px, 90px, 110px, 70px, 500px;
background-size: 1px 50%, 1px 50px, 32px, 120px, 80px, 60px, 90px, 110px, 70px, 500px;
}
.slides {
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
display: block;
-webkit-transition: -webkit-transform 1s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out;
-ms-transition: -ms-transform 1s ease-in-out;
-o-transition: -o-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
.slide {
display: none;
position: absolute;
overflow: hidden;
width: 900px;
height: 700px;
left: 50%;
top: 50%;
margin-top: -350px;
background-color: #eee;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
padding-left: 20px;
padding-top: 10px;
border-radius: 15px;
border: 5px solid #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.6), inset 0 0 6px rgba(0,0,0,0.4);
}
.slide.intro {
text-align: center;
font-size: 2rem;
}
.slide.intro hgroup {
margin-top: 200px;
}
.content {
font-size: 2rem;
}
.content input, button {
font-size: 2rem;
}
.slide textarea.mynotes {
-webkit-appearance: none;
border: 1px #aaa solid;
border-radius: 5px;
width: 100%;
font-size: 1.2rem;
font-style: italic;
box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
padding: 5px;
box-sizing: border-box;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, cursive,serif;
}
.content td {
border: 1px solid black;
}
.invalid {
background-color: red;
}
.slide.section,.slide.intro {
text-align: center;
}
.slide.section,.slide.intro header {
font-size: 2.5rem;
}
.slide li {
margin-bottom: 10px;
}
.slide img {
max-height: 90%;
border: 1px solid white;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
text-align: center;
}
.slide p{
font-size: 2rem;
}
.slide .counter {
color: #999999;
position: absolute;
left: 20px;
bottom: 20px;
display: block;
font-size: 0.7rem;
}
.slide.title > .counter,
.slide.segue > .counter,
.slide.mainTitle > .counter {
display: none;
}
.force-render {
display: block;
visibility: hidden;
}
.slide.far-past {
display: block;
margin-left: -2400px;
}
.slide.past {
visibility: visible;
display: block;
margin-left: -1400px;
}
.slide.current {
visibility: visible;
display: block;
margin-left: -450px;
}
.slide.future {
visibility: visible;
display: block;
margin-left: 500px;
}
.slide.far-future {
display: block;
margin-left: 1500px;
}
/* Content */
header {
font-weight: normal;
letter-spacing: -.05em;
text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
left: 30px;
top: 25px;
font-size: 2rem;
}
h1 {
font-size:1.8rem;
margin-bottom: 0px;
}
h2 {
font-size: 1.9rem;
}
h1:first-child {
margin-top: 0;
}
section, footer {
text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
margin: 20px 30px 0;
display: block;
overflow: hidden;
}
footer {
font-size: 1rem;
margin: 20px 0 0 30px;
}
a {
color: inherit;
display: inline-block;
text-decoration: none;
line-height: 110%;
}
a:hover {
text-decoration: underline;
}
pre {
text-align: left;
font-size: 0.8rem;
padding: 10px 20px;
background: rgba(255,255,255, 0.5);
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid white;
}
pre b {
font-weight: normal;
color: #c61800;
text-shadow: #c61800 0 0 1px;
/*letter-spacing: -1px;*/}
pre em {
font-weight: normal;
font-style: normal;
color: #18a600;
text-shadow: #18a600 0 0 1px;
}
div.example {
display: block;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.4);
border-radius: 8px;
margin-bottom: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
#presentation-counter {
color: #ccc;
font-size: 0.7rem;
letter-spacing: 1px;
position: absolute;
top: 40%;
left: 0;
width: 100%;
text-align: center;
}
#next,
#back {
z-index: 1000;
position: absolute;
top: 5px;
left: 5px;
list-style-type: none;
-webkit-appearance: none;
color: #333;
font-size: 1rem;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
background: -webkit-linear-gradient(#fff 50%, #eee 50%, #ddd);
background: -moz-linear-gradient(#fff 50%, #eee 50%, #ddd);
background: -ms-linear-gradient(#fff 50%, #eee 50%, #ddd);
background: -o-linear-gradient(#fff 50%, #eee 50%, #ddd);
background: linear-gradient(#fff 50%, #eee 50%, #ddd);
border-radius: 7px;
border: none;
padding: 5px 10px;
letter-spacing:1px;
font-size: 1rem;
box-shadow: inset 0 0 2px rgba(0,0,0,0.3),
2px 2px 5px rgba(0,0,0,0.7);
border: 3px solid #eee;
}
#next {left: auto; right: 5px;}
/* OBJECT PAGES */
.object header {
position:absolute;
top: 10px;
width: 100%;
text-align:center;
background-color: rgba(255,255,255,0.9);
left:0;
}
.objectlink {
position:absolute;
top:0; right:0;
color: white;
background-color: #000;
padding: 3px 5px;
border: none;
}
.slide.object {padding:0;}
.object object {width: 100%; height: 100%;}
.notes, .temphidden {display: none;}
@media print {
.slide {
page-break-inside: avoid;
page-break-after: always;
visibility: visible !important;
font-size: 20pt;
font-family: Arial, sans-serif;
}
@page {
size: landscape;
}
body {
font-size: 12pt;
background: white;
}
header h1 {
border-top: 2pt solid gray;
border-bottom: 1px dotted silver;
}
#presentation-counter, #info, #topinfo, .counter {
display: none
}
</style>
</head>
<body>
<!-- Top instructions -->
<div id="topinfo"></div>
<!-- footer instructions -->
<div id="info">
<p><a href="http://standardista.com">Estelle Weyl</a> | <a href="http://twitter.com/estellevw">@estellevw</a> | <a href="http://github.com/estelle">Github</a> | Press <span class="key">&rarr;</span> to advance, <span class="key">2</span> for comments, <span class="key">4</span> to read/write notes.</p>
</div>
<div id="presentation">
<div id="presentation-counter"></div>
<div id="slides">
<div class="slide intro">
<header><hgroup>
<h1>Estelle Weyl</h1>
<h2>Title of talk</h2>
</hgroup></header>
</div>
<div class="slide normal">
<header><h1></h1></header>
<section class="content">
<pre contenteditable></pre>
</section>
</div>
<div class="slide normal">
<header><h1>Viewers can take notes</h1></header>
<section class="content">
<pre contenteditable>Click on the #4 to show some notes stored with local storage</pre>
</section>
</div>
<div class="slide normal">
<header><h1>You can show lines of text over time</h1></header>
<section class="content">
<pre contenteditable>Click on the #2 to show more text</pre>
<p class="temphidden">This used to be hidden</p>
<p class="temphidden">This was also hidden</p>
<p class="temphidden">This too</p>
<p class="temphidden">and so was this</p>
</section>
</div>
</div>
<header>
<nav>
<ul>
<li class="button cancel" id="back">Back</li>
<li class="button done" id="next">Next</li>
</ul>
</nav>
</header>
</div>
<script>
(function() {
var doc = document,
disableBuilds = true,
ctr = 0,
spaces = /\s+/,
a1 = [''],
toArray = function(list) {
return Array.prototype.slice.call(list || [], 0);
},
byId = function(id) {
if (typeof id == 'string') { return doc.getElementById(id); }
return id;
},
query = function(query, root) {
if (!query) { return []; }
if (typeof query != 'string') { return toArray(query); }
if (typeof root == 'string') {
root = byId(root);
if(!root){ return []; }
}
root = root || document;
var rootIsDoc = (root.nodeType == 9);
var doc = rootIsDoc ? root : (root.ownerDocument || document);
// rewrite the query to be ID rooted
if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) {
root.id = root.id || ('qUnique' + (ctr++));
query = '#' + root.id + ' ' + query;
}
// don't choke on something like ".yada.yada >"
if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; }
return toArray(doc.querySelectorAll(query));
},
strToArray = function(s) {
if (typeof s == 'string' || s instanceof String) {
if (s.indexOf(' ') < 0) {
a1[0] = s;
return a1;
}
else {
return s.split(spaces);
}
}
return s;
},
addClass = function(node, classStr) {
classStr = strToArray(classStr);
var cls = ' ' + node.className + ' ';
for (var i = 0, len = classStr.length, c; i < len; ++i) {
c = classStr[i];
if (c && cls.indexOf(' ' + c + ' ') < 0) {
cls += c + ' ';
}
}
node.className = cls.trim();
},
removeClass = function(node, classStr) {
var cls;
if (classStr !== undefined) {
classStr = strToArray(classStr);
cls = ' ' + node.className + ' ';
for (var i = 0, len = classStr.length; i < len; ++i) {
cls = cls.replace(' ' + classStr[i] + ' ', ' ');
}
cls = cls.trim();
} else {
cls = '';
}
if (node.className != cls) {
node.className = cls;
}
},
toggleClass = function(node, classStr) {
var cls = ' ' + node.className + ' ';
if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) {
removeClass(node, classStr);
} else {
addClass(node, classStr);
}
},
ua = navigator.userAgent,
isFF = parseFloat(ua.split('Firefox/')[1]) || undefined,
isWK = parseFloat(ua.split('WebKit/')[1]) || undefined,
isOpera = parseFloat(ua.split('Opera/')[1]) || undefined,
canTransition = (function() {
var ver = parseFloat(ua.split('Version/')[1]) || undefined;
// test to determine if this browser can handle CSS transitions.
var cachedCanTransition =
(isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
return function() { return cachedCanTransition; }
}
)();
//-----------------------------------------------------------------//
var Slide = function(node, idx) {
this._node = node;
if (idx >= 0) {
this._count = idx + 1;
}
if (this._node) {
addClass(this._node, 'slide distant-slide');
}
this._makeCounter();
this._makeBuildList();
};
Slide.prototype = {
_node: null,
_count: 0,
_buildList: [],
_visited: false,
_currentState: '',
_states: [ 'distant-slide', 'far-past',
'past', 'current', 'future',
'far-future', 'distant-slide' ],
setState: function(state) {
if (typeof state != 'string') {
state = this._states[state];
}
if (state == 'current' && !this._visited) {
this._visited = true;
this._makeBuildList();
}
removeClass(this._node, this._states);
addClass(this._node, state);
this._currentState = state;
var _t = this;
setTimeout(function(){ _t._runAutos(); } , 400);
},
_makeCounter: function() {
if(!this._count || !this._node) { return; }
var c = doc.createElement('span');
c.innerHTML = this._count;
c.className = 'counter';
this._node.appendChild(c);
},
_makeBuildList: function() {
this._buildList = [];
if (disableBuilds) { return; }
if (this._node) {
this._buildList = query('[data-build] > *', this._node);
}
this._buildList.forEach(function(el) {
addClass(el, 'to-build');
});
},
_runAutos: function() {
if (this._currentState != 'current') {
return;
}
// find the next auto, slice it out of the list, and run it
var idx = -1;
this._buildList.some(function(n, i) {
if (n.hasAttribute('data-auto')) {
idx = i;
return true;
}
return false;
});
if (idx >= 0) {
var elem = this._buildList.splice(idx, 1)[0];
var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd');
var _t = this;
if (canTransition()) {
var l = function(evt) {
elem.parentNode.removeEventListener(transitionEnd, l, false);
_t._runAutos();
};
elem.parentNode.addEventListener(transitionEnd, l, false);
removeClass(elem, 'to-build');
} else {
setTimeout(function() {
removeClass(elem, 'to-build');
_t._runAutos();
}, 400);
}
}
},
buildNext: function() {
if (!this._buildList.length) {
return false;
}
removeClass(this._buildList.shift(), 'to-build');
return true;
},
};
//
// SlideShow class
//
var SlideShow = function(slides) {
this._slides = (slides || []).map(function(el, idx) {
return new Slide(el, idx);
});
var h = window.location.hash;
try {
this.current = parseInt(h.split('#slide')[1], 10);
} catch (e) { /* squeltch */ }
this.current = isNaN(this.current) ? 1 : this.current;
var _t = this;
doc.addEventListener('keydown', function(e) { _t.handleKeys(e); }, false);
doc.addEventListener('mousewheel', function(e) { _t.handleWheel(e); }, false);
doc.addEventListener('DOMMouseScroll', function(e) { _t.handleWheel(e); }, false);
doc.addEventListener('touchstart', function(e) { _t.handleTouchStart(e); }, false);
doc.addEventListener('touchend', function(e) { _t.handleTouchEnd(e); }, false);
window.addEventListener('popstate', function(e) { _t.go(e.state); }, false);
doc.getElementById('back').addEventListener('click', function(e) {_t.prev();}, false);
doc.getElementById('next').addEventListener('click', function(e) {_t.next();}, false);
this._update();
};
SlideShow.prototype = {
_slides: [],
_update: function(dontPush) {
document.querySelector('#presentation-counter').innerText = this.current;
if (history.pushState) {
if (!dontPush) {
history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current);
}
} else {
window.location.hash = 'flopslide' + this.current;
}
for (var x = this.current-1; x < this.current + 7; x++) {
if (this._slides[x-4]) {
this._slides[x-4].setState(Math.max(0, x-this.current));
}
}
},
current: 0,
next: function() {
if (!this._slides[this.current-1].buildNext()) {
this.current = Math.min(this.current + 1, this._slides.length);
this._update();
}
},
prev: function() {
this.current = Math.max(this.current-1, 1);
this._update();
},
go: function(num) {
if (!num) return;
if (history.pushState && this.current != num) {
history.replaceState(this.current, 'Slide ' + this.current, '#slide' + this.current);
}
this.current = num;
this._update(true);
},
_notesOn: false,
showNotes: function() {
var isOn = this._notesOn = !this._notesOn;
query('.notes').forEach(function(el) {
el.style.display = (isOn) ? '' : 'none';
});
},
handleWheel: function(e) {
var delta = 0;
if (e.wheelDelta) {
delta = e.wheelDelta/120;
if (isOpera) {
delta = -delta;
}
}
else if (e.detail) {
delta = -e.detail/3;
}
if (delta > 0 ) {
this.prev();
return;
}
if (delta < 0 ) {
this.next();
return;
}
},
addNotes: function(){
if(document.querySelector('.current textarea.mynotes')) {
document.querySelector('.current textarea.mynotes').classList.toggle('temphidden');
return;
}
var ta = document.createElement('textarea'),
currentSlide = document.querySelector('.current section'),
path = window.location.pathname,
A = path.lastIndexOf('/') + 1,
B = path.lastIndexOf('.'),
firstPartOfKey, key;
if(B && B > A){
firstPartOfKey = path.substring(A, B);
} else {
firstPartOfKey = path.substring(1, path.length-1) || 'home';
}
//console.log(firstPartOfKey);
key = firstPartOfKey + window.location.hash;
ta.value = window.localStorage.getItem(key) || '';
ta.className = 'mynotes';
ta.addEventListener('keyup', function(){
//console.log(key + ' ' + ta.value)
window.localStorage.setItem(key,ta.value);
});
currentSlide.appendChild(ta);
},
removeHidingClass: function(){
var paragraphToShow = document.querySelector('.current .temphidden');
if(paragraphToShow) {paragraphToShow.classList.remove('temphidden');}
},
handleKeys: function(e) {
// disable keys for these elements
if (/^(input|textarea|pre|object)$/i.test(e.target.nodeName)) return;
switch (e.keyCode) {
case 37: // left arrow
case 33: // left clicker
this.prev(); break;
case 39: // right arrow
case 32: // space
case 34: // clicker right
this.next(); break;
case 50: // 2
case 190: // 2
this.showNotes();
this.removeHidingClass();
break;
case 52: // 4 (for taking notes with local storage (students)
this.addNotes(); break;
break;
}
},
_touchStartX: 0,
handleTouchStart: function(e) {
this._touchStartX = e.touches[0].pageX;
},
handleTouchEnd: function(e) {
var delta = this._touchStartX - e.changedTouches[0].pageX;
var SWIPE_SIZE = 150;
if (delta > SWIPE_SIZE) {
this.next();
} else if (delta< -SWIPE_SIZE) {
this.prev();
}
},
};
// Initialize
var slideshow = new SlideShow(query('.slide'));
})();
</script>
<!--[if lt IE 9]>
<script
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script>CFInstall.check({ mode: "overlay" });</script>
<![endif]-->
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.