Better Image handling for Chrome
authorveltr
Fri, 07 Jun 2013 17:24:56 +0200
changeset 16 471bbaa78d0c
parent 15 01ac2cd2756c
child 17 150ccacec493
child 18 b8a45e2fd6fd
Better Image handling for Chrome
player/js/player.js
--- a/player/js/player.js	Fri Jun 07 16:17:31 2013 +0200
+++ b/player/js/player.js	Fri Jun 07 17:24:56 2013 +0200
@@ -53,10 +53,10 @@
     $(".tags-list").html(tags.map(tagTemplate).join(""));
     
     $(".tags-title").mouseenter(function() {
-        $(".tags-list").slideDown();
+        $(".tags-list").stop().slideDown();
     });
     $(".tags").mouseleave(function() {
-        $(".tags-list").slideUp();
+        $(".tags-list").stop().slideUp();
     });
     
     $("body").click(function() {
@@ -288,35 +288,30 @@
                     loaded = false,
                     slides = annotationinfo.annotation.content.images;
                 
-                var resizeImage = function() {
-                    var imgel = annotationDiv.find(".slideshow-image");
-                    imgel.css("margin-top","");
-                    var w = imgel.width(),
-                        h = imgel.height();
-                    annotationDiv.find(".annotation-main").css("height","");
-                    var h2 = annotationDiv.find(".annotation-main").height();
-                    if (h < h2) {
-                        imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
-                    }
-                    if (+imgel.css("opacity") !== 1) {
-                        imgel.fadeTo(400, 1);
-                    }
-                }
-                
                 var showCurrentImage = function() {
-                    var slide = slides[currentslide];
-                    annotationDiv.find(".slideshow-image").attr({
-                        src: slide.image.src,
+                    $(".slideshow-image").remove();
+                    var slide = slides[currentslide],
+                        srcimg = slide.image,
+                        imgel = $("<img>");
+                    imgel.addClass("slideshow-image");
+                    imgel.attr({
+                        src: srcimg.src,
                         title: slide.title,
                         alt: slide.title
                     });
+                    var wcont = 650, hcont = 452, wsrc = srcimg.width, hsrc = srcimg.height, scale = Math.min(1, Math.min(wcont/wsrc, hcont/hsrc)), h = hsrc * scale;
+                    imgel.css({
+                        opacity: 0,
+                        "margin-top": (h < hcont ? Math.floor((hcont-h)/2)+"px": 0)
+                    });
+                    annotationDiv.find(".slideshow-frame").prepend(imgel);
                     annotationDiv.find(".slideshow-title").text(slide.title);
                     annotationDiv.find(".slideshow-description").html(
                         slide.description.split(/\n/gm).map(function(l) {
                             return '<p>' + _.escape(l) + '</p>';
                         }).join("")
                     );
-                    resizeImage();
+                    imgel.fadeTo(400, 1);
                 }
                 
                 var nextImage = function() {
@@ -342,7 +337,7 @@
                         return;
                     }
                     loaded = slides.reduce(function(mem, slide) {
-                        return (mem && !!slide.image && !!slide.image.width);
+                        return (mem && !!slide.image && !!slide.image.height);
                     }, true);
                     if (loaded) {
                         showCurrentImage();