diff options
| author | luxagraf <sng@luxagraf.net> | 2012-10-14 22:29:43 -0400 |
|---|---|---|
| committer | luxagraf <sng@luxagraf.net> | 2012-10-14 22:29:43 -0400 |
| commit | 37ca84e1f55e14b87b1f8d9e02e81d9b55efca85 (patch) | |
| tree | 96b21f645ff6e321694e4cec1839844f0e22d358 /design/templates/details/gifs.html | |
| parent | 3e2646125792d2152aef086bfad2f0d1062f1d66 (diff) | |
moved and modified a few templates
Diffstat (limited to 'design/templates/details/gifs.html')
| -rw-r--r-- | design/templates/details/gifs.html | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/design/templates/details/gifs.html b/design/templates/details/gifs.html new file mode 100644 index 0000000..7dd8208 --- /dev/null +++ b/design/templates/details/gifs.html @@ -0,0 +1,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"> +<audio id="snd" preload="auto" loop autoplay autobuffer> + <source src="{{object.music_ogg.url}}" type="video/ogg"/> + <source src="{{object.music_mp3.url}}" /> +</audio> +<img id="giffy" src="{{object.gif.url}}" alt="{{object.title}}" /> +</body> +</html> |