diff --git a/public/images/bg.png b/public/images/bg.png new file mode 100644 index 0000000000000000000000000000000000000000..0c5fa78ba13fa749b1a11e54e7986b4c59edd9ab Binary files /dev/null and b/public/images/bg.png differ diff --git a/public/images/no_photo.png b/public/images/no_photo.png new file mode 100644 index 0000000000000000000000000000000000000000..bc482458493f49782751c86eba7a1d5963ec2a30 Binary files /dev/null and b/public/images/no_photo.png differ diff --git a/public/javascripts/wipho.js b/public/javascripts/wipho.js index e3c92bc5b3e3b9a4a246550dde97fa0aaefd280f..c102f31e28d748fda0a5bbc8d46abfcd600759d8 100644 --- a/public/javascripts/wipho.js +++ b/public/javascripts/wipho.js @@ -1,18 +1,44 @@ $(document).ready(function() { - $('body').height($(window).height()); + $('body').height($(window).height()); + centerImage(); - getLatest(); - setInterval(function() { - getLatest(); - }, 3000); - + getLatest(); + setInterval(function() { + getLatest(); + }, 1000); + + $(window).resize(function () { + centerImage(); + }); + + $('#latest').one('load', function(){ + $(this).one('load', function(){ + $(this).addClass('imgBorder'); + }); + }); + + $('#latest').on('load', function(){ + centerImage(); + $(this).animate({opacity: 1}, 400); + }); + }); function getLatest() { - $.getJSON('/latest', function(data) { - if('/previews/'+data.name != $('#latest').attr('src')) { - $('#latest').attr('src', '/previews/'+data.name); - } - }); + $.getJSON('/latest', function(data) { + if('/previews/'+data.name != $('#latest').attr('src')) { + $('#latest').animate({opacity: 0}, 400, function() { + $(this).attr('src', '/previews/'+data.name); + }); + } + }); +} + +function centerImage() { + $('#latest').css({ + position: 'absolute', + left: ($(window).width() - $('#latest').outerWidth()) / 2, + top: ($(window).height() - $('#latest').outerHeight()) / 2, + }); } \ No newline at end of file diff --git a/public/stylesheets/wipho.css b/public/stylesheets/wipho.css index 54c6f7b9be9f69a6d8997fc0c01a92aebd0bcfea..88321b0e1e8a0d8b18e3261ca89670a92c8bed07 100644 --- a/public/stylesheets/wipho.css +++ b/public/stylesheets/wipho.css @@ -1,6 +1,9 @@ body { + overflow:hidden; margin: 0px; padding: 0px; + background-color: #000000; + background-image: url("../images/bg.png"); } a { @@ -8,6 +11,14 @@ a { } #latest { - max-width: 100%; - max-height: 100%; + margin-top: -0.5%; + max-width: 93%; + max-height: 93%; +} + +.imgBorder { + border: solid 5px #222; + -moz-box-shadow: 5px 5px 15px #000; + -webkit-box-shadow: 5px 5px 15px #000; + box-shadow: 5px 5px 15px #000; } \ No newline at end of file diff --git a/views/index.jade b/views/index.jade index 9fa7f036bc61f2bed31ada3285b2c8ebf82b5adf..bc02e22b4ca1fb25aff81543b001a5a59df47d9d 100644 --- a/views/index.jade +++ b/views/index.jade @@ -3,4 +3,4 @@ extends layout block content //h1= title //p Welcome to #{title} - img(id='latest' src='') \ No newline at end of file + img(id='latest' src='images/no_photo.png') \ No newline at end of file