Skip to content

Instantly share code, notes, and snippets.

@ericmeltzer
Last active August 29, 2015 14:04
Show Gist options
  • Save ericmeltzer/ef00a7fe8b34918a54f5 to your computer and use it in GitHub Desktop.
Save ericmeltzer/ef00a7fe8b34918a54f5 to your computer and use it in GitHub Desktop.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, em, font, img, small, strike, strong, sub, sup, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline}
ol, ul {list-style: none}
table {border-collapse: separate;border-spacing: 0}
caption, th, td {text-align: left;font-weight: normal}
blockquote:before, blockquote:after, q:before, q:after {content: ""}
blockquote, q {quotes: "" ""}
/* end reset */
html {cursor: url(blank.png), default;}
body { background-color: #000; }
.container {
text-align: center;
}
.container:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.container img {
width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
function load_img() {
$.ajax({
url: 'data.php',
type: 'get',
dataType: 'json',
async: true,
success: function (response) {
if(response.original_url != $('#art').attr('src')) {
$('#art').attr({'src': response.original_url});
setTimeout( 'center_img()', 5000); }
}
});
}
// this is awful but whatever
function center_img() {
$('.container').height( parseInt( ($(window).height() - $('#art').height()) / 2) );
}
load_img();
setInterval('load_img()', 10000);
setInterval('center_img()', 5000);
//$(window).resize(function() { var h=$(this).height()-30; $('#widget-video').height(h); $('#widget-image').height(h); $('#ks-frame').height(h); });
</script>
</head>
<body>
<div class="container">
<img id="art" src="" />
</div>
</body>
</html>
@ericmeltzer
Copy link
Author

data.php is

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment