blob: 5519a89995695f4472e6982a98cd5158dfe3db82 (
plain)
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
83
|
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<title>{{object.title|safe}}</title>
<style>
body {
background: #222;
}
.overlay {
background-color: #000;
opacity: .9;
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;
}
.btn {
position: absolute;
z-index: 11;
left: 35%;
top: 40%;
}
@media only screen and (max-device-width: 1024px) {
img#giffy {
width: 100%;
}
}
</style>
<script src="http://luxagraf.net/media/js/jquery.js" type="text/javascript"></script>
<script>
var isiPad = false;
var playing = true;
if (navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i)) {
isiPad = true;
}
$(function() {
function togglebtn() {
if (playing) {
document.getElementById('snd').pause();
playing = false
} else {
document.getElementById('snd').play();
playing = true
}
}
document.body.onclick=togglebtn
if (isiPad) {
var overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.setAttribute("class", "overlay");
document.body.appendChild(overlay);
// create image and append to page
var img = document.createElement("img");
img.setAttribute("id","img");
img.src = "btn.png";
img.setAttribute("class","btn");
// click to restore page
img.onclick=restore;
document.body.appendChild(img);
function restore() {
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("img"));
playing = false;
document.getElementById('snd').play();
}
}
});
</script>
</head>
<body id="home">
{%if object.music_ogg %}<audio id="snd" preload="auto" loop autoplay autobuffer>
<source src="{{object.music_ogg.url}}" type="video/ogg"/>
<source src="{{object.music_mp3.url}}" />
</audio>{%endif%}
<img id="giffy" src="{{object.gif.url}}" alt="{{object.title}}" />
</body>
</html>
|
