forked from lslangley/tableau-animation
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap.html
82 lines (63 loc) · 2.27 KB
/
map.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</script>
<script>
function swapImages(){
var $active = $('#myGallery .active');
var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
$next.fadeIn(function(){
$active.removeClass('active');
$next.addClass('active');
$active.fadeOut();
})
}
$(document).ready(function(){
var height = $( document ).height();
var width = $( document ).width();
var size = width + ',' + height;
var locations = [
{"src": "https://public.tableausoftware.com/views/Animated-Map/map?:showVizHome=no&:embed=yes&:toolbar=no&:format=png&:size="+size+"&Year=2010"},
{"src": "https://public.tableausoftware.com/views/Animated-Map/map?:showVizHome=no&:embed=yes&:toolbar=no&:format=png&:size="+size+"&Year=2011"},
{"src": "https://public.tableausoftware.com/views/Animated-Map/map?:showVizHome=no&:embed=yes&:toolbar=no&:format=png&:size="+size+"&Year=2012"},
{"src": "https://public.tableausoftware.com/views/Animated-Map/map?:showVizHome=no&:embed=yes&:toolbar=no&:format=png&:size="+size+"&Year=2013"},
]
$("#myGallery").attr('width',width);
$("#myGallery").attr('height',height);
var img = '';
locations.forEach(function(element, index, array){
if(index==0){
img = '<img src="'+locations[index].src+'" class="active" />';
} else {
img = '<img src="'+locations[index].src+'" />';
}
console.log('index: '+index+' == '+img);
$(img).appendTo("#myGallery");
})
// Change 3000 to whatever time interval you prefer
setInterval('swapImages()', 3000);
});
</script>
<style>
body {
background-color: #353535;
}
#myGallery{
position:relative;
}
#myGallery img{
display:none;
position:absolute;
top:0;
left:0;
}
#myGallery img.active{
display:block;
}
</style>
</head>
<body>
<div id="myGallery">
</div>
</body>
</html>