Skip to content

Instantly share code, notes, and snippets.

@jsanz

jsanz/index.html

Created July 10, 2015 18:52
Show Gist options
  • Save jsanz/1f999c77eccc67dd6bcf to your computer and use it in GitHub Desktop.
Save jsanz/1f999c77eccc67dd6bcf to your computer and use it in GitHub Desktop.
Download ZIP
Flickr album on Odissey
Raw
index.html
<!doctype><html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Odyssey.js Slides</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">
<link rel="icon" type="image/png" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">
<link rel="stylesheet" href="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/themes/css/cartodb.css">
<link rel="stylesheet" href="http://cartodb.github.io/odyssey.js/sandbox/css/slides.css">
<script src="http://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<div id="slides_container" style="display:block;">
<div id="dots"></div>
<div id="slides"></div>
<ul id="navButtons">
<li><a class="prev"></a></li>
<li><a class="next"></a></li>
</ul>
</div>
<div id="credits">
<span class="title" id="title">Title</span>
<span class="author"><strong id="author">By Name using</strong> <a href="http://cartodb.github.io/odyssey.js/">Odyssey.js</a><span>
</span></span></div>
<script src="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js"></script>
<script src="http://cartodb.github.io/odyssey.js/dist/odyssey.js" charset="UTF-8"></script>
<script>
var resizePID;
function clearResize() {
clearTimeout(resizePID);
resizePID = setTimeout(function() { adjustSlides(); }, 100);
}
if (!window.addEventListener) {
window.attachEvent("resize", function load(event) {
clearResize();
});
} else {
window.addEventListener("resize", function load(event) {
clearResize();
});
}
function adjustSlides() {
var container = document.getElementById("slides_container"),
slide = document.querySelectorAll('.selected_slide')[0];
if (slide) {
if (slide.offsetHeight+169+40+80 >= window.innerHeight) {
container.style.bottom = "80px";
var h = container.offsetHeight;
slide.style.height = h-169+"px";
slide.classList.add("scrolled");
} else {
container.style.bottom = "auto";
container.style.minHeight = "0";
slide.style.height = "auto";
slide.classList.remove("scrolled");
}
}
}
var resizeAction = O.Action(function() {
function imageLoaded() {
counter--;
if (counter === 0) {
adjustSlides();
}
}
var images = $('img');
var counter = images.length;
images.each(function() {
if (this.complete) {
imageLoaded.call( this );
} else {
$(this).one('load', imageLoaded);
}
});
});
function click(el) {
var element = O.Core.getElement(el);
var t = O.Trigger();
// TODO: clean properly
function click() {
t.trigger();
}
if (element) element.onclick = click;
return t;
}
O.Template({
init: function() {
var seq = O.Triggers.Sequential();
var baseurl = this.baseurl = 'http://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
var map = this.map = L.map('map').setView([0, 0.0], 4);
var basemap = this.basemap = L.tileLayer(baseurl, {
attribution: 'data OSM - map CartoDB'
}).addTo(map);
// enanle keys to move
O.Keys().on('map').left().then(seq.prev, seq)
O.Keys().on('map').right().then(seq.next, seq)
click(document.querySelectorAll('.next')).then(seq.next, seq)
click(document.querySelectorAll('.prev')).then(seq.prev, seq)
var slides = O.Actions.Slides('slides');
var story = O.Story()
this.story = story;
this.seq = seq;
this.slides = slides;
this.progress = O.UI.DotProgress('dots').count(0);
},
update: function(actions) {
var self = this;
if (!actions.length) return;
this.story.clear();
if (this.baseurl && (this.baseurl !== actions.global.baseurl)) {
this.baseurl = actions.global.baseurl || 'http://0.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
this.basemap.setUrl(this.baseurl);
}
if (this.cartoDBLayer && ("http://"+self.cartoDBLayer.options.user_name+".cartodb.com/api/v2/viz/"+self.cartoDBLayer.options.layer_definition.stat_tag+"/viz.json" !== actions.global.vizjson)) {
this.map.removeLayer(this.cartoDBLayer);
this.cartoDBLayer = null;
this.created = false;
}
if (actions.global.vizjson && !this.cartoDBLayer) {
if (!this.created) { // sendCode debounce < vis loader
cdb.vis.Loader.get(actions.global.vizjson, function(vizjson) {
self.map.fitBounds(vizjson.bounds);
cartodb.createLayer(self.map, vizjson)
.done(function(layer) {
self.cartoDBLayer = layer;
var sublayer = layer.getSubLayer(0),
layer_name = layer.layers[0].options.layer_name,
filter = actions.global.cartodb_filter ? " WHERE "+actions.global.cartodb_filter : "";
sublayer.setSQL("SELECT * FROM "+layer_name+filter)
self.map.addLayer(layer);
self._resetActions(actions);
}).on('error', function(err) {
console.log("some error occurred: " + err);
});
});
this.created = true;
}
return;
}
this._resetActions(actions);
},
_resetActions: function(actions) {
// update footer title and author
var title_ = actions.global.title === undefined ? '' : actions.global.title,
author_ = actions.global.author === undefined ? 'Using' : 'By '+actions.global.author+' using';
document.getElementById('title').innerHTML = title_;
document.getElementById('author').innerHTML = author_;
document.title = title_ + " | " + author_ +' Odyssey.js';
var sl = actions;
document.getElementById('slides').innerHTML = ''
this.progress.count(sl.length);
// create new story
for(var i = 0; i < sl.length; ++i) {
var slide = sl[i];
var tmpl = "<div class='slide' style='diplay:none'>";
tmpl += slide.html();
tmpl += "</div>";
document.getElementById('slides').innerHTML += tmpl;
this.progress.step(i).then(this.seq.step(i), this.seq)
var actions = O.Parallel(
this.slides.activate(i),
slide(this),
this.progress.activate(i),
resizeAction
);
actions.on("finish.app", function() {
adjustSlides();
});
this.story.addState(
this.seq.step(i),
actions
)
}
this.story.go(this.seq.current());
},
changeSlide: function(n) {
this.seq.current(n);
}
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-20934186-21', 'cartodb.github.io');
ga('send', 'pageview');
</script>
<script type="text/javascript" src="http://fast.fonts.net/jsapi/3af16084-ba56-49ca-b37d-0b49b59e1927.js"></script>
<script id="md_template" type="text/template">
```
-baseurl: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
-title: "Tabarca 2014"
-author: "Jorge Sanz"
```
# DSC01505
```
- center: [38.16477, -0.477422]
- zoom: 16
L.marker([38.16477,-0.477422]).actions.addRemove(S.map)
```
![](https://farm4.staticflickr.com/3857/14514527757_680979c101_c.jpg)
2014-07-12 11:28:48
[More info](http://www.flickr.com/photos/81275975@N00/14514527757)
# DSC01487
```
- center: [38.183958, -0.560302]
- zoom: 16
L.marker([38.183958,-0.560302]).actions.addRemove(S.map)
```
![](https://farm4.staticflickr.com/3897/14700680442_eae0bfefee_c.jpg)
2014-07-12 11:36:14
[More info](http://www.flickr.com/photos/81275975@N00/14700680442)
# DSC01495
```
- center: [38.166423, -0.478216]
- zoom: 16
L.marker([38.166423,-0.478216]).actions.addRemove(S.map)
```
![](https://farm6.staticflickr.com/5583/14677965386_63efb69b3e_c.jpg)
2014-07-12 11:52:33
[More info](http://www.flickr.com/photos/81275975@N00/14677965386)
# DSC01496
```
- center: [38.166423, -0.478216]
- zoom: 16
L.marker([38.166423,-0.478216]).actions.addRemove(S.map)
```
![](https://farm4.staticflickr.com/3861/14514301730_dd79106745_c.jpg)
2014-07-12 11:54:30
[More info](http://www.flickr.com/photos/81275975@N00/14514301730)
# DSC01501
```
- center: [38.166381, -0.480705]
- zoom: 16
L.marker([38.166381,-0.480705]).actions.addRemove(S.map)
```
![](https://farm6.staticflickr.com/5585/14701000695_71710f0b84_c.jpg)
2014-07-12 12:01:56
[More info](http://www.flickr.com/photos/81275975@N00/14701000695)
# DSC01503
```
- center: [38.166929, -0.486423]
- zoom: 16
L.marker([38.166929,-0.486423]).actions.addRemove(S.map)
```
![](https://farm4.staticflickr.com/3841/14700716652_4c4a892aef_c.jpg)
2014-07-12 12:09:14
[More info](http://www.flickr.com/photos/81275975@N00/14700716652)
# DSC01514
```
- center: [38.166929, -0.486423]
- zoom: 16
L.marker([38.166929,-0.486423]).actions.addRemove(S.map)
```
![](https://farm6.staticflickr.com/5573/14514352458_2c8514e651_c.jpg)
2014-07-12 13:33:08
[More info](http://www.flickr.com/photos/81275975@N00/14514352458)
# Tabarca
```
- center: [38.166929, -0.486423]
- zoom: 16
L.marker([38.166929,-0.486423]).actions.addRemove(S.map)
```
![](https://farm3.staticflickr.com/2917/14514335640_23dc613100_c.jpg)
2014-07-12 13:34:41
[More info](http://www.flickr.com/photos/81275975@N00/14514335640)
# DSC01523
```
- center: [38.166929, -0.486423]
- zoom: 16
L.marker([38.166929,-0.486423]).actions.addRemove(S.map)
```
![](https://farm6.staticflickr.com/5569/14720891873_1f3e5af7cf_c.jpg)
2014-07-12 13:38:39
[More info](http://www.flickr.com/photos/81275975@N00/14720891873)
# DSC01525
```
- center: [38.166929, -0.486423]
- zoom: 16
L.marker([38.166929,-0.486423]).actions.addRemove(S.map)
```
![](https://farm6.staticflickr.com/5588/14514349460_7a5ab80fe8_c.jpg)
2014-07-12 13:39:04
[More info](http://www.flickr.com/photos/81275975@N00/14514349460)
# DSC01529
```
- center: [38.166929, -0.486423]
- zoom: 16
L.marker([38.166929,-0.486423]).actions.addRemove(S.map)
```
![](https://farm4.staticflickr.com/3877/14514352960_8a20ff4ed9_c.jpg)
2014-07-12 13:41:27
[More info](http://www.flickr.com/photos/81275975@N00/14514352960)
# Tabarca
```
- center: [38.166929, -0.486423]
- zoom: 16
L.marker([38.166929,-0.486423]).actions.addRemove(S.map)
```
![](https://farm4.staticflickr.com/3918/14701051335_7a592fdae0_c.jpg)
2014-07-12 13:41:41
[More info](http://www.flickr.com/photos/81275975@N00/14701051335)
# DSC01531
```
- center: [38.166929, -0.486423]
- zoom: 16
L.marker([38.166929,-0.486423]).actions.addRemove(S.map)
```
![](https://farm4.staticflickr.com/3902/14701058265_30a75591cd_c.jpg)
2014-07-12 13:42:17
[More info](http://www.flickr.com/photos/81275975@N00/14701058265)
# DSC01532
```
- center: [38.166929, -0.486423]
- zoom: 16
L.marker([38.166929,-0.486423]).actions.addRemove(S.map)
```
![](https://farm6.staticflickr.com/5591/14514395499_6d4b882a4e_c.jpg)
2014-07-12 13:42:25
[More info](http://www.flickr.com/photos/81275975@N00/14514395499)
# DSC01543
```
- center: [38.165942, -0.480169]
- zoom: 16
L.marker([38.165942,-0.480169]).actions.addRemove(S.map)
```
![](https://farm4.staticflickr.com/3877/14700777362_fe048ae30b_c.jpg)
2014-07-12 16:50:45
[More info](http://www.flickr.com/photos/81275975@N00/14700777362)
# DSC01550
```
- center: [38.16477, -0.477422]
- zoom: 16
L.marker([38.16477,-0.477422]).actions.addRemove(S.map)
```
![](https://farm4.staticflickr.com/3843/14698674694_c4d8f1fa80_c.jpg)
2014-07-12 16:55:07
[More info](http://www.flickr.com/photos/81275975@N00/14698674694)
# DSC01552
```
- center: [38.16477, -0.477422]
- zoom: 16
L.marker([38.16477,-0.477422]).actions.addRemove(S.map)
```
![](https://farm3.staticflickr.com/2934/14514396850_5377958558_c.jpg)
2014-07-12 17:03:22
[More info](http://www.flickr.com/photos/81275975@N00/14514396850)
# DSC01554
```
- center: [38.16477, -0.477422]
- zoom: 16
L.marker([38.16477,-0.477422]).actions.addRemove(S.map)
```
![](https://farm4.staticflickr.com/3873/14700805122_61099c2db9_c.jpg)
2014-07-12 17:07:04
[More info](http://www.flickr.com/photos/81275975@N00/14700805122)
# DSC01556
```
- center: [38.16477, -0.477422]
- zoom: 16
L.marker([38.16477,-0.477422]).actions.addRemove(S.map)
```
![](https://farm4.staticflickr.com/3844/14514441438_5f0a17c25e_c.jpg)
2014-07-12 17:07:25
[More info](http://www.flickr.com/photos/81275975@N00/14514441438)
</script></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment