accidently left alwaysBlend global defaul set to true during development. Looking forward to our new org based repo where I'll be constrained more than my current wild-west repo, sorry. corrections also to pan constrainment details which came to the forefront while working on collections zoom and panconstraints. Added new ui feature page to demo basics.

build.properties

@@ -6,7 +6,7 @@
 PROJECT: openseadragon
 BUILD_MAJOR: 0
 BUILD_MINOR: 9
-BUILD_ID: 97
+BUILD_ID: 98
 BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
 VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
 

build.xml

@@ -72,6 +72,7 @@
         <publish page='ui-reference-strip' title='Image Reference Strip | '/>
         <publish page='ui-toolbar' title='Toolbar | '/>
         <publish page='ui-viewport-navigator' title='Viewport Navigator | '/>
+        <publish page='ui-zoom-and-pan' title='Viewport Zoom and Pan | '/>
 
         <publish page='developer-debug-mode' title='Developer Tools - Debug Mode | '/>
 

openseadragon.js

@@ -1,7 +1,7 @@
 /*globals OpenSeadragon */
 
 /**
- * @version  OpenSeadragon 0.9.97
+ * @version  OpenSeadragon 0.9.98
  *
  * @fileOverview 
  * <h2>
@@ -469,33 +469,41 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             tileSources:            null, 
             tileHost:               null,
             
-            //INTERFACE FEATURES
+            //PAN AND ZOOM SETTINGS AND CONSTRAINTS
-            animationTime:          1.5,
-            blendTime:              0.5,
-            alwaysBlend:            true,
-            autoHideControls:       true,
-            immediateRender:        false,
-            wrapHorizontal:         false,
-            wrapVertical:           false,
             panHorizontal:          true,
             panVertical:            true,
-
+            wrapHorizontal:         false,
+            wrapVertical:           false,
             visibilityRatio:        0.5,
+            minPixelRatio:          0.5,
+            minZoomImageRatio:      0.8,
+            maxZoomPixelRatio:      2,
+            defaultZoomLevel:       0,
+            minZoomLevel:           null,
+            maxZoomLevel:           null, 
+
+            //UI RESPONSIVENESS AND FEEL
             springStiffness:        5.0,
             clickTimeThreshold:     300,
             clickDistThreshold:     5,
             zoomPerClick:           2.0,
             zoomPerScroll:          1.2,
             zoomPerSecond:          2.0,
+            animationTime:          1.5,
+            blendTime:              0.5,
+            alwaysBlend:            false,
+            autoHideControls:       true,
+            immediateRender:        false,
 
-            showNavigationControl:  true,
+            //DEFAULT CONTROL SETTINGS
-            showSequenceControl:    true,
+            showSequenceControl:    true,  //SEQUENCE
-            controlsFadeDelay:      2000,
+            preserveViewport:       false, //SEQUENCE
-            controlsFadeLength:     1500,
+            showNavigationControl:  true,  //ZOOM/HOME/FULL/SEQUENCE
-            mouseNavEnabled:        true,
+            controlsFadeDelay:      2000,  //ZOOM/HOME/FULL/SEQUENCE
-            preserveViewport:       false,
+            controlsFadeLength:     1500,  //ZOOM/HOME/FULL/SEQUENCE
-            defaultZoomLevel:       0, 
+            mouseNavEnabled:        true,  //GENERAL MOUSE INTERACTIVITY
 
+            //VIEWPORT NAVIGATOR SETTINGS
             showNavigator:          true, //promoted to default in 0.9.64
             navigatorElement:       null,
             navigatorHeight:        null,
@@ -503,6 +511,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             navigatorPosition:      null,
             navigatorSizeRatio:     0.2,
 
+            //REFERENCE STRIP SETTINGS
             showReferenceStrip:          false, 
             referenceStripScroll:       'horizontal',
             referenceStripElement:       null,
@@ -521,11 +530,8 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             onPageChange:           null, 
             
             //PERFORMANCE SETTINGS
-            minPixelRatio:          0.5,
             imageLoaderLimit:       0,
             maxImageCacheCount:     200,
-            minZoomImageRatio:      0.8,
-            maxZoomPixelRatio:      2,
             timeout:                5000,
 
             //INTERFACE RESOURCE SETTINGS
@@ -3688,7 +3694,10 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                 animationTime:          this.animationTime,
                 showNavigator:          false,
                 minZoomImageRatio:      1,
-                maxZoomPixelRatio:      1
+                maxZoomPixelRatio:      1//,
+                //TODO: figure out how to support these in a way that makes sense
+                //minZoomLevel:           this.minZoomLevel,
+                //maxZoomLevel:           this.maxZoomLevel
             });
         }else{
             if( source ){
@@ -3703,7 +3712,10 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                 maxZoomPixelRatio:  this.maxZoomPixelRatio,
                 visibilityRatio:    this.visibilityRatio,
                 wrapHorizontal:     this.wrapHorizontal,
-                wrapVertical:       this.wrapVertical
+                wrapVertical:       this.wrapVertical,
+                defaultZoomLevel:   this.defaultZoomLevel,
+                minZoomLevel:       this.minZoomLevel,
+                maxZoomLevel:       this.maxZoomLevel
             });
         }
         
@@ -3711,21 +3723,6 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             
             this.viewport.resetContentSize( this.source.dimensions );
 
-        } else if( this.defaultZoomLevel || this.collectionMode ){
-
-            if( this.collectionMode ){
-                /*this.viewport.zoomTo( 
-                    ( this.viewport.getMaxZoom() + this.viewport.getMaxZoom())/ 2, 
-                    this.viewport.getCenter(),
-                    true
-                );*/
-            }else{
-                this.viewport.zoomTo( 
-                    this.defaultZoomLevel, 
-                    this.viewport.getCenter(),  
-                    true
-                );
-            }
         } 
 
         this.drawer = new $.Drawer({
@@ -9133,7 +9130,10 @@ $.Viewport = function( options ) {
         maxZoomPixelRatio:  $.DEFAULT_SETTINGS.maxZoomPixelRatio,
         visibilityRatio:    $.DEFAULT_SETTINGS.visibilityRatio,
         wrapHorizontal:     $.DEFAULT_SETTINGS.wrapHorizontal,
-        wrapVertical:       $.DEFAULT_SETTINGS.wrapVertical
+        wrapVertical:       $.DEFAULT_SETTINGS.wrapVertical,
+        defaultZoomLevel:   $.DEFAULT_SETTINGS.defaultZoomLevel,
+        minZoomLevel:       $.DEFAULT_SETTINGS.minZoomLevel,
+        maxZoomLevel:       $.DEFAULT_SETTINGS.maxZoomLevel
 
     }, options );
 
@@ -9155,7 +9155,6 @@ $.Viewport = function( options ) {
 
     this.resetContentSize( this.contentSize );
     this.goHome( true );
-    //this.fitHorizontally( true );
     this.update();
 };
 
@@ -9176,13 +9175,40 @@ $.Viewport.prototype = {
      * @function
      */
     getHomeZoom: function() {
-        
         var aspectFactor = 
             this.contentAspectX / this.getAspectRatio();
 
-        return ( aspectFactor >= 1 ) ? 
+        if( this.defaultZoomLevel ){
-            1 : 
+            return this.defaultZoomLevel;
-            aspectFactor;
+        } else {
+            return ( aspectFactor >= 1 ) ? 
+                1 : 
+                aspectFactor;
+        }
+    },
+
+    /**
+     * @function
+     */
+    getHomeBounds: function() {
+        var center = this.homeBounds.getCenter( ),
+            width  = 1.0 / this.getHomeZoom( ),
+            height = width / this.getAspectRatio();
+
+        return new $.Rect(
+            center.x - ( width / 2.0 ), 
+            center.y - ( height / 2.0 ),
+            width, 
+            height
+        );
+    },
+
+    /**
+     * @function
+     * @param {Boolean} immediately
+     */
+    goHome: function( immediately ) {
+        return this.fitBounds( this.getHomeBounds(), immediately );
     },
 
     /**
@@ -9190,7 +9216,9 @@ $.Viewport.prototype = {
      */
     getMinZoom: function() {
         var homeZoom = this.getHomeZoom(),
-            zoom = this.minZoomImageRatio * homeZoom;
+            zoom = this.minZoomLevel ? 
+            this.minZoomLevel : 
+                this.minZoomImageRatio * homeZoom;
 
         return Math.min( zoom, homeZoom );
     },
@@ -9199,10 +9227,10 @@ $.Viewport.prototype = {
      * @function
      */
     getMaxZoom: function() {
-        var zoom = 
+        var zoom = this.maxZoomLevel ?
-            this.contentSize.x * 
+            this.maxZoomLevel :
-            this.maxZoomPixelRatio / 
+                ( this.contentSize.x * this.maxZoomPixelRatio / this.containerSize.x );
-            this.containerSize.x;
+
         return Math.max( zoom, this.getHomeZoom() );
     },
 
@@ -9300,7 +9328,6 @@ $.Viewport.prototype = {
         }
     },
 
-
     /**
      * @function
      */
@@ -9317,8 +9344,10 @@ $.Viewport.prototype = {
             right,
             top,
             bottom,
+            center,
             dx = 0,
-            dy = 0;
+            dy = 0,
+            dx1 = 0, dx2 = 0, dy1 = 0, dy2 = 0;
 
         if ( actualZoom != constrainedZoom ) {
             this.zoomTo( constrainedZoom, this.zoomPoint, immediately );
@@ -9336,23 +9365,39 @@ $.Viewport.prototype = {
 
         if ( this.wrapHorizontal ) {
             //do nothing
-        } else if ( left < horizontalThreshold ) {
+        } else {
-            dx = horizontalThreshold - left;
+            if ( left < horizontalThreshold ) {
-        } else if ( right < horizontalThreshold ) {
+                dx = horizontalThreshold - left;
-            dx = right - horizontalThreshold;
+            } 
+            if ( right < horizontalThreshold ) {
+                dx = dx ? 
+                    ( dx + right - horizontalThreshold ) / 2 :
+                    ( right - horizontalThreshold );
+            }
         }
 
         if ( this.wrapVertical ) {
             //do nothing
-        } else if ( top < verticalThreshold ) {
+        } else {
-            dy = verticalThreshold - top;
+            if ( top < verticalThreshold ) {
-        } else if ( bottom < verticalThreshold ) {
+                dy = ( verticalThreshold - top );
-            dy = bottom - verticalThreshold;
+            } 
+            if ( bottom < verticalThreshold ) {
+                dy =  dy ? 
+                    ( dy + bottom - verticalThreshold ) / 2 :
+                    ( bottom - verticalThreshold );
+            }
         }
 
-        if ( dx || dy ) {
+        if ( dx || dy || immediately ) {
             bounds.x += dx;
             bounds.y += dy;
+            if( bounds.width > 1  ){
+                bounds.x = 0.5 - bounds.width/2;
+            }
+            if( bounds.height > this.contentAspectY ){
+                bounds.y = this.contentAspectY/2 - bounds.height/2;
+            }
             this.fitBounds( bounds, immediately );
         }
         return this;
@@ -9363,8 +9408,7 @@ $.Viewport.prototype = {
      * @param {Boolean} immediately
      */
     ensureVisible: function( immediately ) {
-        this.applyConstraints( immediately );
+        return this.applyConstraints( immediately );
-        return this;
     },
 
     /**
@@ -9401,8 +9445,7 @@ $.Viewport.prototype = {
         oldZoom   = this.getZoom();
         newZoom   = 1.0 / newBounds.width;
         if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) {
-            this.panTo( center, immediately );
+            return this.panTo( center, immediately );
-            return this;
         }
 
         referencePoint = oldBounds.getTopLeft().times( 
@@ -9416,17 +9459,9 @@ $.Viewport.prototype = {
             this.containerSize.x / newBounds.width
         );
 
-        this.zoomTo( newZoom, referencePoint, immediately );
+        return this.zoomTo( newZoom, referencePoint, immediately );
-        return this;
     },
     
-    /**
-     * @function
-     * @param {Boolean} immediately
-     */
-    goHome: function( immediately ) {
-        return this.fitBounds( this.homeBounds, immediately );
-    },
 
     /**
      * @function
@@ -9449,8 +9484,7 @@ $.Viewport.prototype = {
             this.centerSpringY.update();
         }
 
-        this.fitBounds( this.fitHeightBounds, immediately );
+        return this.fitBounds( this.fitHeightBounds, immediately );
-        return this;
     },
 
     /**
@@ -9474,8 +9508,7 @@ $.Viewport.prototype = {
             this.centerSpringY.update();
         }
 
-        this.fitBounds( this.fitWidthBounds, immediately );
+        return this.fitBounds( this.fitWidthBounds, immediately );
-        return this;
     },
 
 
@@ -9489,8 +9522,7 @@ $.Viewport.prototype = {
             this.centerSpringX.target.value,
             this.centerSpringY.target.value
         );
-        this.panTo( center.plus( delta ), immediately );
+        return this.panTo( center.plus( delta ), immediately );
-        return this;
     },
 
     /**
@@ -9514,8 +9546,7 @@ $.Viewport.prototype = {
      * @function
      */
     zoomBy: function( factor, refPoint, immediately ) {
-        this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately );
+        return this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately );
-        return this;
     },
 
     /**
@@ -9555,9 +9586,7 @@ $.Viewport.prototype = {
             newBounds.height = newBounds.width / this.getAspectRatio();
         }
 
-        this.fitBounds( newBounds, true );
+        return this.fitBounds( newBounds, true );
-
-        return this;
     },
 
     /**

src/openseadragon.js

@@ -469,33 +469,41 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             tileSources:            null, 
             tileHost:               null,
             
-            //INTERFACE FEATURES
+            //PAN AND ZOOM SETTINGS AND CONSTRAINTS
-            animationTime:          1.5,
-            blendTime:              0.5,
-            alwaysBlend:            true,
-            autoHideControls:       true,
-            immediateRender:        false,
-            wrapHorizontal:         false,
-            wrapVertical:           false,
             panHorizontal:          true,
             panVertical:            true,
-
+            wrapHorizontal:         false,
+            wrapVertical:           false,
             visibilityRatio:        0.5,
+            minPixelRatio:          0.5,
+            minZoomImageRatio:      0.8,
+            maxZoomPixelRatio:      2,
+            defaultZoomLevel:       0,
+            minZoomLevel:           null,
+            maxZoomLevel:           null, 
+
+            //UI RESPONSIVENESS AND FEEL
             springStiffness:        5.0,
             clickTimeThreshold:     300,
             clickDistThreshold:     5,
             zoomPerClick:           2.0,
             zoomPerScroll:          1.2,
             zoomPerSecond:          2.0,
+            animationTime:          1.5,
+            blendTime:              0.5,
+            alwaysBlend:            false,
+            autoHideControls:       true,
+            immediateRender:        false,
 
-            showNavigationControl:  true,
+            //DEFAULT CONTROL SETTINGS
-            showSequenceControl:    true,
+            showSequenceControl:    true,  //SEQUENCE
-            controlsFadeDelay:      2000,
+            preserveViewport:       false, //SEQUENCE
-            controlsFadeLength:     1500,
+            showNavigationControl:  true,  //ZOOM/HOME/FULL/SEQUENCE
-            mouseNavEnabled:        true,
+            controlsFadeDelay:      2000,  //ZOOM/HOME/FULL/SEQUENCE
-            preserveViewport:       false,
+            controlsFadeLength:     1500,  //ZOOM/HOME/FULL/SEQUENCE
-            defaultZoomLevel:       0, 
+            mouseNavEnabled:        true,  //GENERAL MOUSE INTERACTIVITY
 
+            //VIEWPORT NAVIGATOR SETTINGS
             showNavigator:          true, //promoted to default in 0.9.64
             navigatorElement:       null,
             navigatorHeight:        null,
@@ -503,6 +511,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             navigatorPosition:      null,
             navigatorSizeRatio:     0.2,
 
+            //REFERENCE STRIP SETTINGS
             showReferenceStrip:          false, 
             referenceStripScroll:       'horizontal',
             referenceStripElement:       null,
@@ -521,11 +530,8 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             onPageChange:           null, 
             
             //PERFORMANCE SETTINGS
-            minPixelRatio:          0.5,
             imageLoaderLimit:       0,
             maxImageCacheCount:     200,
-            minZoomImageRatio:      0.8,
-            maxZoomPixelRatio:      2,
             timeout:                5000,
 
             //INTERFACE RESOURCE SETTINGS

src/viewer.js

@@ -375,7 +375,10 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                 animationTime:          this.animationTime,
                 showNavigator:          false,
                 minZoomImageRatio:      1,
-                maxZoomPixelRatio:      1
+                maxZoomPixelRatio:      1//,
+                //TODO: figure out how to support these in a way that makes sense
+                //minZoomLevel:           this.minZoomLevel,
+                //maxZoomLevel:           this.maxZoomLevel
             });
         }else{
             if( source ){
@@ -390,7 +393,10 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                 maxZoomPixelRatio:  this.maxZoomPixelRatio,
                 visibilityRatio:    this.visibilityRatio,
                 wrapHorizontal:     this.wrapHorizontal,
-                wrapVertical:       this.wrapVertical
+                wrapVertical:       this.wrapVertical,
+                defaultZoomLevel:   this.defaultZoomLevel,
+                minZoomLevel:       this.minZoomLevel,
+                maxZoomLevel:       this.maxZoomLevel
             });
         }
         
@@ -398,21 +404,6 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             
             this.viewport.resetContentSize( this.source.dimensions );
 
-        } else if( this.defaultZoomLevel || this.collectionMode ){
-
-            if( this.collectionMode ){
-                /*this.viewport.zoomTo( 
-                    ( this.viewport.getMaxZoom() + this.viewport.getMaxZoom())/ 2, 
-                    this.viewport.getCenter(),
-                    true
-                );*/
-            }else{
-                this.viewport.zoomTo( 
-                    this.defaultZoomLevel, 
-                    this.viewport.getCenter(),  
-                    true
-                );
-            }
         } 
 
         this.drawer = new $.Drawer({

src/viewport.js

@@ -43,7 +43,10 @@ $.Viewport = function( options ) {
         maxZoomPixelRatio:  $.DEFAULT_SETTINGS.maxZoomPixelRatio,
         visibilityRatio:    $.DEFAULT_SETTINGS.visibilityRatio,
         wrapHorizontal:     $.DEFAULT_SETTINGS.wrapHorizontal,
-        wrapVertical:       $.DEFAULT_SETTINGS.wrapVertical
+        wrapVertical:       $.DEFAULT_SETTINGS.wrapVertical,
+        defaultZoomLevel:   $.DEFAULT_SETTINGS.defaultZoomLevel,
+        minZoomLevel:       $.DEFAULT_SETTINGS.minZoomLevel,
+        maxZoomLevel:       $.DEFAULT_SETTINGS.maxZoomLevel
 
     }, options );
 
@@ -65,7 +68,6 @@ $.Viewport = function( options ) {
 
     this.resetContentSize( this.contentSize );
     this.goHome( true );
-    //this.fitHorizontally( true );
     this.update();
 };
 
@@ -86,13 +88,40 @@ $.Viewport.prototype = {
      * @function
      */
     getHomeZoom: function() {
-        
         var aspectFactor = 
             this.contentAspectX / this.getAspectRatio();
 
-        return ( aspectFactor >= 1 ) ? 
+        if( this.defaultZoomLevel ){
-            1 : 
+            return this.defaultZoomLevel;
-            aspectFactor;
+        } else {
+            return ( aspectFactor >= 1 ) ? 
+                1 : 
+                aspectFactor;
+        }
+    },
+
+    /**
+     * @function
+     */
+    getHomeBounds: function() {
+        var center = this.homeBounds.getCenter( ),
+            width  = 1.0 / this.getHomeZoom( ),
+            height = width / this.getAspectRatio();
+
+        return new $.Rect(
+            center.x - ( width / 2.0 ), 
+            center.y - ( height / 2.0 ),
+            width, 
+            height
+        );
+    },
+
+    /**
+     * @function
+     * @param {Boolean} immediately
+     */
+    goHome: function( immediately ) {
+        return this.fitBounds( this.getHomeBounds(), immediately );
     },
 
     /**
@@ -100,7 +129,9 @@ $.Viewport.prototype = {
      */
     getMinZoom: function() {
         var homeZoom = this.getHomeZoom(),
-            zoom = this.minZoomImageRatio * homeZoom;
+            zoom = this.minZoomLevel ? 
+            this.minZoomLevel : 
+                this.minZoomImageRatio * homeZoom;
 
         return Math.min( zoom, homeZoom );
     },
@@ -109,10 +140,10 @@ $.Viewport.prototype = {
      * @function
      */
     getMaxZoom: function() {
-        var zoom = 
+        var zoom = this.maxZoomLevel ?
-            this.contentSize.x * 
+            this.maxZoomLevel :
-            this.maxZoomPixelRatio / 
+                ( this.contentSize.x * this.maxZoomPixelRatio / this.containerSize.x );
-            this.containerSize.x;
+
         return Math.max( zoom, this.getHomeZoom() );
     },
 
@@ -210,7 +241,6 @@ $.Viewport.prototype = {
         }
     },
 
-
     /**
      * @function
      */
@@ -227,8 +257,10 @@ $.Viewport.prototype = {
             right,
             top,
             bottom,
+            center,
             dx = 0,
-            dy = 0;
+            dy = 0,
+            dx1 = 0, dx2 = 0, dy1 = 0, dy2 = 0;
 
         if ( actualZoom != constrainedZoom ) {
             this.zoomTo( constrainedZoom, this.zoomPoint, immediately );
@@ -246,23 +278,39 @@ $.Viewport.prototype = {
 
         if ( this.wrapHorizontal ) {
             //do nothing
-        } else if ( left < horizontalThreshold ) {
+        } else {
-            dx = horizontalThreshold - left;
+            if ( left < horizontalThreshold ) {
-        } else if ( right < horizontalThreshold ) {
+                dx = horizontalThreshold - left;
-            dx = right - horizontalThreshold;
+            } 
+            if ( right < horizontalThreshold ) {
+                dx = dx ? 
+                    ( dx + right - horizontalThreshold ) / 2 :
+                    ( right - horizontalThreshold );
+            }
         }
 
         if ( this.wrapVertical ) {
             //do nothing
-        } else if ( top < verticalThreshold ) {
+        } else {
-            dy = verticalThreshold - top;
+            if ( top < verticalThreshold ) {
-        } else if ( bottom < verticalThreshold ) {
+                dy = ( verticalThreshold - top );
-            dy = bottom - verticalThreshold;
+            } 
+            if ( bottom < verticalThreshold ) {
+                dy =  dy ? 
+                    ( dy + bottom - verticalThreshold ) / 2 :
+                    ( bottom - verticalThreshold );
+            }
         }
 
-        if ( dx || dy ) {
+        if ( dx || dy || immediately ) {
             bounds.x += dx;
             bounds.y += dy;
+            if( bounds.width > 1  ){
+                bounds.x = 0.5 - bounds.width/2;
+            }
+            if( bounds.height > this.contentAspectY ){
+                bounds.y = this.contentAspectY/2 - bounds.height/2;
+            }
             this.fitBounds( bounds, immediately );
         }
         return this;
@@ -273,8 +321,7 @@ $.Viewport.prototype = {
      * @param {Boolean} immediately
      */
     ensureVisible: function( immediately ) {
-        this.applyConstraints( immediately );
+        return this.applyConstraints( immediately );
-        return this;
     },
 
     /**
@@ -311,8 +358,7 @@ $.Viewport.prototype = {
         oldZoom   = this.getZoom();
         newZoom   = 1.0 / newBounds.width;
         if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) {
-            this.panTo( center, immediately );
+            return this.panTo( center, immediately );
-            return this;
         }
 
         referencePoint = oldBounds.getTopLeft().times( 
@@ -326,17 +372,9 @@ $.Viewport.prototype = {
             this.containerSize.x / newBounds.width
         );
 
-        this.zoomTo( newZoom, referencePoint, immediately );
+        return this.zoomTo( newZoom, referencePoint, immediately );
-        return this;
     },
     
-    /**
-     * @function
-     * @param {Boolean} immediately
-     */
-    goHome: function( immediately ) {
-        return this.fitBounds( this.homeBounds, immediately );
-    },
 
     /**
      * @function
@@ -359,8 +397,7 @@ $.Viewport.prototype = {
             this.centerSpringY.update();
         }
 
-        this.fitBounds( this.fitHeightBounds, immediately );
+        return this.fitBounds( this.fitHeightBounds, immediately );
-        return this;
     },
 
     /**
@@ -384,8 +421,7 @@ $.Viewport.prototype = {
             this.centerSpringY.update();
         }
 
-        this.fitBounds( this.fitWidthBounds, immediately );
+        return this.fitBounds( this.fitWidthBounds, immediately );
-        return this;
     },
 
 
@@ -399,8 +435,7 @@ $.Viewport.prototype = {
             this.centerSpringX.target.value,
             this.centerSpringY.target.value
         );
-        this.panTo( center.plus( delta ), immediately );
+        return this.panTo( center.plus( delta ), immediately );
-        return this;
     },
 
     /**
@@ -424,8 +459,7 @@ $.Viewport.prototype = {
      * @function
      */
     zoomBy: function( factor, refPoint, immediately ) {
-        this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately );
+        return this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately );
-        return this;
     },
 
     /**
@@ -465,9 +499,7 @@ $.Viewport.prototype = {
             newBounds.height = newBounds.width / this.getAspectRatio();
         }
 
-        this.fitBounds( newBounds, true );
+        return this.fitBounds( newBounds, true );
-
-        return this;
     },
 
     /**

www/base.html

@@ -88,6 +88,9 @@
             controls to entirely custom interfaces.
             </p>
             <ul>
+                <li><a href='/openseadragon/examples/ui-zoom-and-pan/'>
+                    <span>Zoom and Pan</span>
+                </a></li>
                 <li><a href='/openseadragon/examples/ui-viewport-navigator/'>
                     <span>Viewport Navigator</span>
                 </a></li>