Merge pull request #532 from openseadragon/ian

Auto-resize now works for multi-image

src/navigator.js

@@ -272,23 +272,10 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
                     (this.container.clientWidth === 0 ? 1 : this.container.clientWidth),
                     (this.container.clientHeight === 0 ? 1 : this.container.clientHeight)
                 );
+
             if ( !containerSize.equals( this.oldContainerSize ) ) {
-                var oldBounds = this.viewport.getBounds();
-                var oldCenter = this.viewport.getCenter();
                 this.viewport.resize( containerSize, true );
-                var worldBounds = this.world.getHomeBounds();
+                this.viewport.goHome(true);
-                var aspectRatio = worldBounds.width / worldBounds.height;
-                var imageHeight = 1 / aspectRatio;
-                var newWidth = oldBounds.width <= 1 ? oldBounds.width : 1;
-                var newHeight = oldBounds.height <= imageHeight ?
-                    oldBounds.height : imageHeight;
-                var newBounds = new $.Rect(
-                    oldCenter.x - ( newWidth / 2.0 ),
-                    oldCenter.y - ( newHeight / 2.0 ),
-                    newWidth,
-                    newHeight
-                    );
-                this.viewport.fitBounds( newBounds, true );
                 this.oldContainerSize = containerSize;
                 this.drawer.update();
             }

src/viewer.js

@@ -2735,11 +2735,9 @@ function resizeViewportAndRecenter( viewer, containerSize, oldBounds, oldCenter
 
     // We try to remove blanks as much as possible
     var worldBounds = viewer.world.getHomeBounds();
-    var aspectRatio = worldBounds.width / worldBounds.height;
+    var newWidth = oldBounds.width <= worldBounds.width ? oldBounds.width : worldBounds.width;
-    var imageHeight = 1 / aspectRatio;
+    var newHeight = oldBounds.height <= worldBounds.height ?
-    var newWidth = oldBounds.width <= 1 ? oldBounds.width : 1;
+        oldBounds.height : worldBounds.height;
-    var newHeight = oldBounds.height <= imageHeight ?
-        oldBounds.height : imageHeight;
 
     var newBounds = new $.Rect(
         oldCenter.x - ( newWidth / 2.0 ),

test/demo/collections/index.html

@@ -15,6 +15,10 @@
                 margin: 0;
             }
 
+            .openseadragon1.small {
+                width: 50%;
+            }
+
             .openseadragon-overlay {
                 background-color: rgba(255, 0, 0, 0.3);
             }

test/demo/collections/main.js

@@ -9,7 +9,7 @@
             var testInitialOpen = true;
             var testOverlays = false;
             var testMargins = false;
-            var testNavigator = false;
+            var testNavigator = true;
             var margins;
 
             var config = {
@@ -116,6 +116,12 @@
             }
         },
 
+        // ----------
+        toggle: function() {
+            var $el = $(this.viewer.element);
+            $el.toggleClass('small');
+        },
+
         // ----------
         basicTest: function() {
             var self = this;