Work to improve zoom popups for better scaling. Not finalised. WIP #1647 @1.75

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 1b7d5c70166b0d28fe0f7a37b6f9bb0da1295d16..208945c637de0bc7a54aad1179bf97627aa1608f 100644 (file)
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -129,6 +129,8 @@ FluidbookLinks.prototype = {
             box = $link[0].getBoundingClientRect(),
             parent = $link.closest('.link'),
             maxZoom = parseInt($link.data('maxzoom')) || 2,
+            baseWidth = parseInt($link.data('width')),
+            baseHeight = parseInt($link.data('height')),
             x,
             y,
             zoomWidth,
@@ -142,12 +144,13 @@ FluidbookLinks.prototype = {
         var linkId = $(parent).attr('id').split('_', 2)[1];
         var zoomImage = 'data/links/zoom_' + linkId + '.jpg';
 
-
         // Calculate best scale factor to fit and also to honour the maxZoom level
-        zoomScale = Math.min((availableWidth / box.width), (availableHeight / box.height), maxZoom);
+        zoomScale = Math.min((availableWidth / baseWidth), (availableHeight / baseHeight), maxZoom);
+
+        console.log('Maxzoom = ' + maxZoom + ' | zoomScale is: ' + zoomScale);
 
-        zoomWidth = box.width * zoomScale;
-        zoomHeight = box.height * zoomScale;
+        zoomWidth = baseWidth * zoomScale;
+        zoomHeight = baseHeight * zoomScale;
 
         // Calculate translate co-ordinates
         x = availableWidth / 2 - parent.offset().left - zoomWidth / 2 + zoomMargin;
@@ -159,8 +162,8 @@ FluidbookLinks.prototype = {
 
         z.css({
             transform: 'none',
-            width: box.width,
-            height: box.height,
+            width: Math.round(box.width), // Rounded to prevent scaling discrepancies against zoom image
+            height: Math.round(box.height),
             left: box.left,
             top: box.top
         });
@@ -172,7 +175,7 @@ FluidbookLinks.prototype = {
             this.fluidbook.hideLoader();
             z.show();
 
-            var s = (zoomWidth / box.width);
+            var s = (zoomWidth / Math.round(box.width));
             $(".zoomPopupClose").css('opacity', 0).transform({scale: (0.5 * this.fluidbook.resize.interfaceScale) / s, origin: ['100%', '0', 0]});
             setTimeout(function () {
                 z.css({