web/res/metadataplayer/ImageDisplay.js
changeset 1304 10974bff4dae
parent 1198 ff4b567d51f2
--- a/web/res/metadataplayer/ImageDisplay.js	Fri Dec 11 18:11:13 2015 +0100
+++ b/web/res/metadataplayer/ImageDisplay.js	Tue Dec 29 13:25:14 2015 +0100
@@ -7,27 +7,27 @@
 IriSP.Widgets.ImageDisplay.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.ImageDisplay.prototype.defaults = {
-    annotation_type: "Slides",
+    annotation_type: "Slides"
     // container: "imageContainer"
 }
 
-IriSP.Widgets.ImageDisplay.prototype.template = '<div class="Ldt-ImageDisplay-Container"><img class="Ldt-ImageDisplay-Image" title="" alt="Slide Image" src=""/><div class="Ldt-ImageDisplay-Overlay Ldt-ImageDisplay-Overlay-Left"></div><div class="Ldt-ImageDisplay-Overlay Ldt-ImageDisplay-Overlay-Right"></div></div>';
+IriSP.Widgets.ImageDisplay.prototype.template = '<div class="Ldt-ImageDisplay-Container"><div class="Ldt-ImageDisplay-Overlay Ldt-ImageDisplay-Overlay-Left"></div><div class="Ldt-ImageDisplay-Overlay Ldt-ImageDisplay-Overlay-Right"></div></div>';
 
 IriSP.Widgets.ImageDisplay.prototype.annotationTemplate = '';
 
 IriSP.Widgets.ImageDisplay.prototype.update = function(annotation) {
     // Update the widget with data corresponding to the annotation
-    this.image.setAttribute("title", IriSP.textFieldHtml(annotation.title) + " - " + annotation.begin.toString());
-    this.image.setAttribute("src", annotation.thumbnail);
+    this.image.css("background-image", "url(" + annotation.thumbnail + ")");
+    this.image.attr("title", IriSP.textFieldHtml(annotation.title) + " - " + annotation.begin.toString());
 };
 
-IriSP.Widgets.ImageDisplay.prototype.draw = function() {    
+IriSP.Widgets.ImageDisplay.prototype.draw = function() {
     var _annotations = this.getWidgetAnnotations().sortBy(function(_annotation) {
         return _annotation.begin;
     });
     var _this = this;
     _this.renderTemplate();
-    _this.image = _this.$.find("img")[0];
+    _this.image = _this.$.find(".Ldt-ImageDisplay-Container");
 
     _this.$.find(".Ldt-ImageDisplay-Overlay-Left").on("click", function () { _this.navigate(-1); });
     _this.$.find(".Ldt-ImageDisplay-Overlay-Right").on("click", function () { _this.navigate(+1); });