diff --git a/.gitignore b/.gitignore
index b74decb0d189c69cf09617b4065fe9aa5bfbe532..cd07471f9afa049f8f63f30ebe75500d7510163d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,4 @@
/config.php
+/logo/*.png
+/fanart/*.jpg
+/poster/*.jpg
diff --git a/api.php b/api.php
index 96e9d4f6524dd9a5e5e2e558f02e6a909884898f..c17cb0575efff901c7dda50769e7ecd82c62121d 100644
--- a/api.php
+++ b/api.php
@@ -45,7 +45,7 @@ if ($_GET['get'] == 'poster' && !empty($_GET['show'])) {
$img = new Imagick();
$img->setOption('jpeg:size', '800x532');
$img->readImage($source);
- $img->thumbnailImage(150, 0);
+ $img->thumbnailImage(0, 220);
$img->setImageCompression(Imagick::COMPRESSION_JPEG);
$img->setImageCompressionQuality(80);
$img->writeImage($poster);
@@ -68,12 +68,12 @@ if ($_GET['get'] == 'fanart' && !empty($_GET['show'])) {
$source = $showsPath.'/'.$_GET['show'].'/fanart.jpg';
if(file_exists($source)) {
$img = new Imagick();
- $img->setOption('jpeg:size', '1280x720');
+ $img->setOption('jpeg:size', '1024x576');
$img->readImage($source);
- $img->thumbnailImage(1280, 720);
+ $img->thumbnailImage(1024, 0);
$overlay = new Imagick();
- $overlay->newImage(1280, 720, new ImagickPixel('black'));
- $overlay->setOption('jpeg:size', '1280x720');
+ $overlay->newImage(1024, 576, new ImagickPixel('black'));
+ $overlay->setOption('jpeg:size', '1024x576');
$overlay->setImageOpacity(0.80);
$img->compositeImage($overlay, imagick::COMPOSITE_OVER, 0, 0);
$img->setImageCompression(Imagick::COMPRESSION_JPEG);
diff --git a/css/mediarack.css b/css/mediarack.css
index 01888ed319ed048619b8bb9a33cbf8c4f81c6539..d9831c4acd5de3543d985855d7c5647e036e7469 100644
--- a/css/mediarack.css
+++ b/css/mediarack.css
@@ -6,8 +6,9 @@ body {
margin-bottom: 50px;
}
-.showName {
-
+.showName.panel-heading {
+ min-height: 71px;
+ height: 71px;
}
.showLogo {
@@ -20,8 +21,13 @@ body {
}
-.showPoster {
-
+.thumbnail {
+ min-height: 230px;
+ height: 230px;
+}
+.thumbnail img.showPoster {
+ min-height: 220px;
+ height: 220px;
}
.episodes {
@@ -30,4 +36,9 @@ body {
.panel-title {
font-weight: bold;
+}
+
+div.panel-body.lazy {
+ background: repeat-y top center;
+ background-size: 100% auto;
}
\ No newline at end of file
diff --git a/img/no_fanart.jpg b/img/no_fanart.jpg
index 2f02c443088745c7970e03cb3af4203bec59d3e0..9208b47307dee29262f3955d02158715f7da47d9 100644
Binary files a/img/no_fanart.jpg and b/img/no_fanart.jpg differ
diff --git a/img/no_poster.jpg b/img/no_poster.jpg
index 64d2dfacb07918321c1cc1b97c0d3de10d381a3e..6468107a8ceb14e782398ffc4f25363a2bacbc1e 100644
Binary files a/img/no_poster.jpg and b/img/no_poster.jpg differ
diff --git a/index.php b/index.php
index 0632f6d615a0f3ea710835104b27119f49923009..e06371f86714ab84463982a8fb29c8d893cb813b 100644
--- a/index.php
+++ b/index.php
@@ -72,6 +72,8 @@
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
+ <script src="js/jquery.lazyload.min.js"></script>
+ <script src="js/jquery.scrollstop.js"></script>
<script src="js/mediarack.js"></script>
</body>
</html>
diff --git a/js/jquery.lazyload.min.js b/js/jquery.lazyload.min.js
new file mode 100644
index 0000000000000000000000000000000000000000..b94a83ae538629aa6b98fddb9b50eed6dc411bfa
--- /dev/null
+++ b/js/jquery.lazyload.min.js
@@ -0,0 +1,2 @@
+/*! Lazy Load 1.9.1 - MIT license - Copyright 2010-2013 Mika Tuupola */
+!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);
\ No newline at end of file
diff --git a/js/jquery.scrollstop.js b/js/jquery.scrollstop.js
new file mode 100644
index 0000000000000000000000000000000000000000..a0bb6371002f36c275d90ef0a78f4e951c1b36a4
--- /dev/null
+++ b/js/jquery.scrollstop.js
@@ -0,0 +1,72 @@
+/* http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ */
+
+(function(){
+
+ var special = jQuery.event.special,
+ uid1 = "D" + (+new Date()),
+ uid2 = "D" + (+new Date() + 1);
+
+ special.scrollstart = {
+ setup: function() {
+
+ var timer,
+ handler = function(evt) {
+
+ var _self = this,
+ _args = arguments;
+
+ if (timer) {
+ clearTimeout(timer);
+ } else {
+ evt.type = "scrollstart";
+ jQuery.event.dispatch.apply(_self, _args);
+ }
+
+ timer = setTimeout( function(){
+ timer = null;
+ }, special.scrollstop.latency);
+
+ };
+
+ jQuery(this).bind("scroll", handler).data(uid1, handler);
+
+ },
+ teardown: function(){
+ jQuery(this).unbind( "scroll", jQuery(this).data(uid1) );
+ }
+ };
+
+ special.scrollstop = {
+ latency: 300,
+ setup: function() {
+
+ var timer,
+ handler = function(evt) {
+
+ var _self = this,
+ _args = arguments;
+
+ if (timer) {
+ clearTimeout(timer);
+ }
+
+ timer = setTimeout( function(){
+
+ timer = null;
+ evt.type = "scrollstop";
+ jQuery.event.dispatch.apply(_self, _args);
+
+
+ }, special.scrollstop.latency);
+
+ };
+
+ jQuery(this).bind("scroll", handler).data(uid2, handler);
+
+ },
+ teardown: function() {
+ jQuery(this).unbind( "scroll", jQuery(this).data(uid2) );
+ }
+ };
+
+})();
\ No newline at end of file
diff --git a/js/mediarack.js b/js/mediarack.js
index 65dd0a2d2217b78ce9fbc72d84edd8ac9ebd8047..733fac26b9cebc13cc672bc6e4e9732d7ca765b9 100644
--- a/js/mediarack.js
+++ b/js/mediarack.js
@@ -12,10 +12,10 @@ function getShows() {
divShows.empty();
$.each(data, function (key, show) {
var divShowContainer = $('<div class="show panel panel-default" data-showid="'+show.id+'" id="show_'+show.id+'"></div>');
- var divShowHeader = $('<div class="showName panel-heading"><h2 class="panel-title text-center"><img class="showLogo" alt="'+show.name+'" src="api.php?get=logo&show='+escape(show.folder)+'" /></h2></div>');
- var divShowBody = $('<div class="panel-body" ></div>');
+ var divShowHeader = $('<div class="showName panel-heading"><h2 class="panel-title text-center"><img class="showLogo lazy" style="min-height: 50px; height: 50px;" alt="'+show.name+'" data-original="api.php?get=logo&show='+escape(show.folder)+'" src="" /></h2></div>');
+ var divShowBody = $('<div class="panel-body lazy" data-original="api.php?get=fanart&show='+escape(show.folder)+'"></div>');
var divShowFooter =$('<div class="panel-footer">Seasons: , Episodes: </div>');
- var divShowPoster = $('<div class="showPoster col-md-2 text-center"><a href="#" class="thumbnail"><img id="poster_'+show.id+'" src="api.php?get=poster&show='+escape(show.folder)+'" /></a></div>');
+ var divShowPoster = $('<div class="col-md-2 text-center"><a href="#" class="thumbnail"><img id="poster_'+show.id+'" class="showPoster lazy" data-original="api.php?get=poster&show='+escape(show.folder)+'" src="img/no_poster.jpg" /></a></div>');
var ulSeasons = $('<ul class="seasons col-md-10 list-group"></ul>');
$.each(show.seasons, function(key, season) {
var liSeason = $('<li class="season list-group-item" data-season="'+season.season+'"><strong>Season '+season.season+'</strong><span class="badge">'+season.count+'</span></li>');
@@ -32,8 +32,23 @@ function getShows() {
divShowContainer.append(divShowHeader);
divShowBody.append(divShowPoster);
divShowBody.append(ulSeasons);
- divShowBody.css('background', 'url(api.php?get=fanart&show='+escape(show.folder)+') repeat-y top center');
+ //divShowBody.css('background', 'url(api.php?get=fanart&show='+escape(show.folder)+') repeat-y top center');
//divShowHeader.append('<img class="showLogo" alt="'+show.name+'" src="api.php?get=logo&show='+escape(show.folder)+'" />');
+ $("img.showLogo.lazy").lazyload({
+ event: "scrollstop",
+ effect: "fadeIn",
+ threshold: 800
+ });
+ divShowBody.lazyload({
+ event: "scrollstop",
+ effect: "fadeIn",
+ threshold: 1600
+ });
+ $("img.showPoster.lazy").lazyload({
+ event: "scrollstop",
+ effect: "fadeIn",
+ threshold: 800
+ });
divShowContainer.append(divShowBody);
divShowContainer.append(divShowFooter);
divShows.append(divShowContainer);