fixed devicepixelratio bug.

- updated src update in zoom containers.

Signed-off-by: root <root@ipekatrinadei.ipe.kit.edu>

static/fossil/js/script.js

@@ -14,9 +14,6 @@ function exitHandler() {
     if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
         if (!document.fullscreenElement && !document.mozFullScreenElement &&
             !document.webkitFullscreenElement && !document.msFullscreenElement) { 
-            console.log("Exit FS");
-            //$(glob_elem).css("width", glob_width+"px");
-            //$(glob_elem).css("height", glob_height+"px");
             $(glob_elem).css("width", "100%");
             $(glob_elem).css("height", "100%");
             $(glob_elem).css("background-color", "white");
@@ -25,7 +22,6 @@ function exitHandler() {
             $("#top-quality-text").text("Size: 25%");
             $("#left-quality-text").text("Size: 25%");
         } else {
-            console.log("Enter FS");
             $("#front-quality-text").text("Size: 100%");
             $("#top-quality-text").text("Size: 100%");
             $("#left-quality-text").text("Size: 100%");
@@ -40,28 +36,20 @@ function toggleFullscreen(elem) {
     var ori_width = glob_width
     var ori_height = glob_height;
       
-    console.log("DEBUG");
-    console.log(screen.width, screen.height, glob_width, glob_height)
     var fs_scale;
 
     if (!document.fullscreenElement && !document.mozFullScreenElement &&
       !document.webkitFullscreenElement && !document.msFullscreenElement) { 
       if ((ori_height*1.2) > ori_width) {
-        newWidth = screen.width * 0.5;
-        newHeight = screen.width * (ori_height/ori_width) * 0.5;
+        newWidth = screen.width * (1/Math.ceil(window.devicePixelRatio));
+        newHeight = screen.width * (ori_height/ori_width) * (1/Math.ceil(window.devicePixelRatio));
       } else {
-        newHeight = screen.height * 0.6;
-        newWidth = screen.height * (ori_width/ori_height) * 0.6;
+        newHeight = screen.height * (1/Math.ceil(window.devicePixelRatio));
+        newWidth = screen.height * (ori_width/ori_height) * (1/Math.ceil(window.devicePixelRatio));
       }
-      //$(elem, "img").css("height", (screen.height*0.8)+"px");
-      //$(elem, "img").css("width", (screen.width*0.8)+"px");
       $(elem, "img").css("height", (newHeight)+"px");
       $(elem, "img").css("width", (newWidth)+"px");
-
-      
       
-      //$(elem).css("width", Math.max(screen.width, screen.height)+"px");
-      //$(elem).css("width", "90%");
       $(elem).css("background-color", "black");
       $(elem).css("color", "#ccc");
 
@@ -75,20 +63,10 @@ function toggleFullscreen(elem) {
         elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
       }
     } else {
-      console.log("Set width height");
-      console.log(ori_width);
-      console.log(ori_height);
       $(elem).css("width", "100%");
-      //$(elem).css("height", "100%");
-      //$(elem).css("width", ori_width+"px");
-      //$(elem).css("height", ori_height+"px");
       $(elem).css("background-color", "white");
       $(elem).css("color", "#000");
 
-      //img_fullscreen = $(elem).attr("src").split("&");
-      //img_fullscreen = img_fullscreen[0] + "&" + img_fullscreen[1] + "&" + img_fullscreen[2] + "-resized&" + img_fullscreen[3];
-      //$(elem).attr("src", img_fullscreen);
-
       if (document.exitFullscreen) {
         document.exitFullscreen();
       } else if (document.msExitFullscreen) {
@@ -209,14 +187,17 @@ $(function() {
                 var left_index = $( "#slider-left" ).slider( "option", "value" );
                 var top_index = $( "#slider-center" ).slider( "option", "value" );
                 var front_index = $( "#slider-right" ).slider( "option", "value" );
+                // update images
                 $("#placeholder-left").attr("src", "img?id="+index+"&name="+name+"&type=left-resized&counter="+(left_index-1));
                 $("#img-top").attr("src", "img?id="+index+"&name="+name+"&type=top-resized&counter="+(top_index-1));
                 $("#img-front").attr("src", "img?id="+index+"&name="+name+"&type=front-resized&counter="+(front_index-1));
-            
-                //$("#front-quality-text").text( " " + ($("#img-front").width() / response.front_count).toFixed(2).toString() + "%");
-                //$("#top-quality-text").text(" " + ($("#img-top").width()  / response.top_count).toFixed(2).toString() + "%");
-                //$("#left-quality-text").text(" " + ($("#placeholder-left").width()  / response.left_count).toFixed(2).toString() + "%"); 
-            
+           
+                var imageUrlLeft = "img?id="+index+"&name="+name+"&type=left-resized&counter="+(left_index-1);
+                var imageUrlTop ="img?id="+index+"&name="+name+"&type=top-resized&counter="+(top_index-1); 
+                var imageUrlFront = "img?id="+index+"&name="+name+"&type=front-resized&counter="+(front_index-1);
+                $("#placeholder-left-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlLeft + '")');
+                $("#img-top-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlTop + '")');
+                $("#img-front-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlFront + '")');
             },
             error: function () {
                 console.log("Error.")