src/widgets/ImageDisplay.js
changeset 1068 7623f9af9272
parent 1033 c20df1c080e6
child 1072 ac1eacb3aa33
--- a/src/widgets/ImageDisplay.js	Fri Sep 25 14:45:38 2015 +0200
+++ b/src/widgets/ImageDisplay.js	Fri Oct 02 11:27:17 2015 +0200
@@ -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); });