Skip to content

Instantly share code, notes, and snippets.

@robinhouston

robinhouston/README.md

Last active October 27, 2019 19:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save robinhouston/4978526 to your computer and use it in GitHub Desktop.
Save robinhouston/4978526 to your computer and use it in GitHub Desktop.
Download ZIP
Slider – Talkie demo
Raw
README.md

A demonstration of the slider module.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slider – Talkie demo 03</title>
<link rel="stylesheet" type="text/css" href="http://kiln.it/talkie/ui/1.0/talkie.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://kiln.it/talkie-1.min.js"></script>
<style>
body { background: white; font-family: Helvetica, Arial, sans-serif; }
#wrapper { width: 750px; margin: auto; position: relative; background: #DADADA; }
#header { width: 100%; background: #252535; color: yellow; line-height: 3em; text-align: center; }
#header h1 { margin: 0; }
#slider { padding: 14px 10px 10px 10px; background: white; width: 680px; position: relative; left: 25px;
border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
-moz-border-bottom-left-radius: 10px; -moz-border-bottom-right-radius: 10px; }
#controls { width: 740px; padding: 8px 5px 3px; }
#controls audio { width: 100%; }
.talkie-slider-panel { font-size: 320px; text-align: center; line-height: 320px; }
.talkie-slider-panel span { vertical-align: middle; }
</style>
</head>
<body id="example-02-slider">
<div id="wrapper">
<div id="header">
<h1>This is the Talkie slider</h1>
</div>
<div id="slider" class="talkie-slider">
<div class="talkie-slider-arrowprev"></div>
<div class="talkie-slider-arrownext"></div>
<div class="talkie-slider-panel" id="five"><span>5</span></div>
<div class="talkie-slider-panel" id="four"><span>4</span></div>
<div class="talkie-slider-panel" id="three"><span>3</span></div>
<div class="talkie-slider-panel" id="two"><span>2</span></div>
<div class="talkie-slider-panel" id="one"><span>1</span></div>
<div class="talkie-slider-panel" id="zero"><span>✺</span></div>
</div>
<div class="talkie-slider-nav"></div>
<div id="controls">
<audio id="soundtrack" controls="controls">
<source src="http://kiln.it/talkie/examples/audio/01.countdown.ogg" type="audio/ogg">
<source src="http://kiln.it/talkie/examples/audio/01.countdown.mp3" type="audio/mpeg">
</audio>
</div>
</div>
<script>
var slider = Talkie.slider("#slider").navigation(".talkie-slider-nav");
var timeline = Talkie.timeline("#soundtrack", {
"0:01": slider.panel("#four"),
"0:02": slider.panel("#three"),
"0:03": slider.panel("#two"),
"0:04": slider.panel("#one"),
"0:05": slider.panel("#zero")
});
// When panel 0 loads, animate the asterisk
Talkie.addEventListener("#zero", "Talkie.slider.load", function() {
d3.select("#zero span").style("font-size", "12px").style("color", "#000000")
.transition().duration(1500).style("font-size", "320px").style("color", "#F83195");
});
// If a panel is loaded explicitly by the user,
// a) pause the soundtrack, if it’s playing,
// b) ask the panel to be slid back when the soundtrack resumes.
Talkie.addEventListener("#slider", "Talkie.slider.load", function(e) {
if (e.explicitly) {
timeline.pause();
timeline.undoInteraction(function() { slider.slideTo(e.fromPanel); });
}
});
</script>
</body>
</html>
Raw
talkie.css
.talkie-slider-frame {
padding: 14px 10px 10px 10px;
background: white;
width: 680px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-bottom-left-radius: 10px;
-moz-border-bottom-right-radius: 10px;
position: relative;
left: 25px;
}
.talkie-slider-frame-inner {
width: 680px;
height: 350px;
overflow: hidden;
}
.talkie-slider {
width: 32767px;
height: 350px;
}
.talkie-slider-panel {
width: 680px;
height: 350px;
float: left;
}
.talkie-slider-arrowprev {
position: absolute;
top: 160px;
left: -24px;
opacity: 0;
border: none;
width: 24px;
height: 43px;
background: url(images/arrow-prev.png);
cursor: pointer;
}
.talkie-slider-arrownext {
position: absolute;
top: 160px;
left: 700px;
width: 24px;
height: 43px;
background: url(images/arrow-next.png);
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment