diff --git a/frontend/elements/ken-burns.html b/frontend/elements/ken-burns.html
index d23d27b..02278f4 100755
--- a/frontend/elements/ken-burns.html
+++ b/frontend/elements/ken-burns.html
@@ -24,9 +24,25 @@
box-sizing: border-box;
pointer-events: all;
}
+
+ #image {
+ display: inline-block;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ background-size: contain;
+ background-position: center center;
+ background-repeat: no-repeat;
+ transition: opacity 0.5s ease-in-out;
+ -webkit-transition: opacity 0.5s ease-in-out;
+ }
+
-
+
+
@@ -83,10 +99,9 @@
this.showImage();
- this.$.image.src = this.image.src;
+ this.$.image.style.backgroundImage = 'url(' + this.image.src + ')';
this.$.image.style.opacity = 1;
this.image = undefined;
- this.setActive(true);
}, remaining);
}.bind(this, path);
diff --git a/frontend/src/ketr-photos/ketr-photos.html b/frontend/src/ketr-photos/ketr-photos.html
index 1b6d5c6..f9c5f8d 100755
--- a/frontend/src/ketr-photos/ketr-photos.html
+++ b/frontend/src/ketr-photos/ketr-photos.html
@@ -1245,10 +1245,19 @@
delete this.slideshowTimeout;
return;
}
- this.slideshowTimeout = window.setTimeout(this.slideshowNext.bind(this), 24 * 1000);
+
+ if (this.slideshowTimeout) {
+ window.cancelTimeout(this.slideshowTimeout);
+ delete this.slideshowTimeout;
+ }
+
if (!this.thumbnails.length) {
+ this.slideshowTimeout = window.setTimeout(this.slideshowNext.bind(this), 150);
return;
}
+
+ this.slideshowTimeout = window.setTimeout(this.slideshowNext.bind(this), 24 * 1000);
+
var photo = this.thumbnails[Math.floor(this.thumbnails.length * Math.random())].item;
this.$.kenBurns.item = photo;
this.$.kenBurns.src = this.base + photo.path + "thumbs/scaled/" + photo.filename;