basic slideshow code
This commit is contained in:
Nicky Case
parent
0d41d5345f
commit
5975459f2c
|
|
@ -0,0 +1,14 @@
|
|||
// 0 - INTRODUCTION
|
||||
SLIDES.push(
|
||||
{
|
||||
chapter: "1",
|
||||
boxes: [
|
||||
{words:"_0a", x:20, y:70, w:300, h:200}
|
||||
]
|
||||
},
|
||||
{
|
||||
boxes: [
|
||||
{words:"_0b", x:300, y:70, w:250, h:200}
|
||||
]
|
||||
}
|
||||
);
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
body{
|
||||
margin:0;
|
||||
|
||||
font-family: "FuturaHandwritten";
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#slideshow_container{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
#slideshow{
|
||||
position: absolute;
|
||||
width: 960px;
|
||||
height: 540px;
|
||||
margin: auto;
|
||||
top:0; left:0; right:0; bottom:0;
|
||||
background: #eee;
|
||||
}
|
||||
#slideshow div{
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#navigation{
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
background: #222;
|
||||
width: 100%;
|
||||
height:60px;
|
||||
}
|
||||
|
||||
words, bonus, glossary{
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!--
|
||||
|
||||
SLIDES:
|
||||
Keep all words on index.html. This allows people to translate it to SAME repo!
|
||||
/de.html, etc etc
|
||||
Same format as EvoTrust. But also footnotes.
|
||||
Cursor is allowed to flow EVERYWHERE though...
|
||||
|
||||
-->
|
||||
|
||||
<!doctype>
|
||||
<html>
|
||||
<head>
|
||||
<title>The Wisdom and/or Madness of Crowds</title>
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="slideshow_container">
|
||||
<div id="slideshow">
|
||||
</div>
|
||||
</div>
|
||||
<div id="navigation">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script src="js/helpers.js"></script>
|
||||
<script src="js/Slideshow.js"></script>
|
||||
<script src="chapters/0_Introduction.js"></script>
|
||||
|
||||
<!-- THE MAIN EXPLORABLE EXPLANATION -->
|
||||
|
||||
<!-- 0. Introduction -->
|
||||
<words id="_0a">
|
||||
Why is it that the <i>same</i> people,
|
||||
in <i>different</i> groups, can be kind, cruel, smart, stupid?
|
||||
In this explorable explanation,
|
||||
I'll show how the <i>network</i> of a group itself
|
||||
can shape the people caught in its web.
|
||||
</words>
|
||||
<words id="_0b">
|
||||
herp derp herp derp
|
||||
</words>
|
||||
|
||||
<!-- 1. Networks -->
|
||||
<words id="_1a">
|
||||
herp derp herp derp herp derp
|
||||
</words>
|
||||
<words id="_1b">
|
||||
herp derp herp derp herp derp
|
||||
</words>
|
||||
|
||||
<!-- 2. Simple Contagions -->
|
||||
<!-- 3. Complex Contagions -->
|
||||
<!-- 4. Bonding & Bridging -->
|
||||
<!-- 5. Sandbox -->
|
||||
<!-- 6. Conclusion -->
|
||||
|
||||
<!-- 7. Credits -->
|
||||
|
||||
<!-- BONUS BOXES (footnotes) -->
|
||||
<bonus>
|
||||
</bonus>
|
||||
|
||||
<!-- GLOSSARY -->
|
||||
<glossary>
|
||||
</glossary>
|
||||
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
//////////////////////////
|
||||
// THE SLIDESHOW, YO /////
|
||||
//////////////////////////
|
||||
|
||||
var SLIDES = [];
|
||||
var slideshow = new Slideshow();
|
||||
|
||||
function Slideshow(){
|
||||
|
||||
var self = this;
|
||||
|
||||
// The DOM & properties...
|
||||
self.dom = $("#slideshow");
|
||||
self.slideIndex = 0;
|
||||
|
||||
// GOTO and NEXT
|
||||
self.goto = function(index){
|
||||
|
||||
self.slideIndex = index;
|
||||
var slide = SLIDES[index];
|
||||
|
||||
// Clear DOM
|
||||
self.clear();
|
||||
|
||||
// Add boxes
|
||||
slide.boxes = slide.boxes || [];
|
||||
slide.boxes.forEach(function(box){
|
||||
var boxDOM = document.createElement("div");
|
||||
boxDOM.className = "word_box";
|
||||
if(box.words) boxDOM.innerHTML = $("words#"+box.words).innerHTML;
|
||||
if(box.x) boxDOM.style.left = box.x;
|
||||
if(box.y) boxDOM.style.top = box.y;
|
||||
if(box.w) boxDOM.style.width = box.w;
|
||||
if(box.h) boxDOM.style.height = box.h;
|
||||
self.dom.appendChild(boxDOM);
|
||||
});
|
||||
|
||||
};
|
||||
self.gotoChapter = function(chapterID){
|
||||
var index = SLIDES.findIndex(function(slide){
|
||||
return slide.chapter == chapterID;
|
||||
});
|
||||
self.goto(index);
|
||||
};
|
||||
self.next = function(){
|
||||
self.goto(self.slideIndex+1);
|
||||
};
|
||||
|
||||
// Clear out the DOM
|
||||
self.clear = function(){
|
||||
self.dom.innerHTML = "";
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// On load, set slideshow to first slide
|
||||
window.addEventListener("load", function(){
|
||||
slideshow.goto(0);
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
//////////////////
|
||||
// HELPERS ///////
|
||||
//////////////////
|
||||
|
||||
function $(query){
|
||||
return document.querySelector(query);
|
||||
}
|
||||
Loading…
Reference in New Issue