better lazy loading for image reference strip and more options for managing additional html content that is available in full page mode and normal mode

build.properties

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

openseadragon.js

@@ -1,5 +1,5 @@
 /**
- * @version  OpenSeadragon 0.9.76
+ * @version  OpenSeadragon 0.9.80
  *
  * @fileOverview 
  * <h2>
@@ -3849,7 +3849,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
      * @return {Boolean}
      */
     isFullPage: function () {
-        return this.container.parentNode == document.body;
+        return this.element.parentNode == document.body;
     },
 
 
@@ -3866,7 +3866,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
         var body            = document.body,
             bodyStyle       = body.style,
             docStyle        = document.documentElement.style,
-            containerStyle  = this.container.style,
+            containerStyle  = this.element.style,
             canvasStyle     = this.canvas.style,
             oldBounds,
             newBounds,
@@ -3895,7 +3895,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             canvasStyle.backgroundColor = "black";
             canvasStyle.color           = "white";
 
-            containerStyle.position = "fixed";
+            //containerStyle.position = "fixed";
 
             //when entering full screen on the ipad it wasnt sufficient to leave
             //the body intact as only only the top half of the screen would 
@@ -3903,6 +3903,9 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             //them as touch events on the document body.  Thus we remove and store
             //the bodies elements and replace them when we leave full screen.
             this.previousBody = [];
+            THIS[ this.hash ].prevElementParent = this.element.parentNode;
+            THIS[ this.hash ].prevNextSibling = this.element.prevNextSibling;
+            THIS[ this.hash ].prevElementSize = $.getElementSize( this.element );
             nodes = body.childNodes.length;
             for ( i = 0; i < nodes; i ++ ){
                 this.previousBody.push( body.childNodes[ 0 ] );
@@ -3924,14 +3927,21 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                     'class',
                     this.toolbar.element.className +" fullpage"
                 );
-                this.toolbar.element.style.position = 'fixed';
+                //this.toolbar.element.style.position = 'fixed';
 
-                this.container.style.top = $.getElementSize(
+                //this.container.style.top = $.getElementSize(
-                    this.toolbar.element
+                //    this.toolbar.element
-                ).y + 'px';
+                //).y + 'px';
             }
-            body.appendChild( this.container );
+            body.appendChild( this.element );
-            THIS[ this.hash ].prevContainerSize = $.getWindowSize();
+            if( this.toolbar && this.toolbar.element ){
+                this.element.style.height = (
+                    $.getWindowSize().y - $.getElementSize( this.toolbar.element ).y
+                ) + 'px';
+            }else{
+                this.element.style.height = $.getWindowSize().y + 'px';
+            }
+            this.element.style.width = $.getWindowSize().x + 'px';
 
             // mouse will be inside container now
             $.delegate( this, onContainerEnter )();    
@@ -3948,9 +3958,19 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             canvasStyle.backgroundColor = "";
             canvasStyle.color           = "";
 
-            containerStyle.position = "relative";
+            //containerStyle.position = "relative";
-            containerStyle.zIndex   = "";
+            //containerStyle.zIndex   = "";
 
+            body.removeChild( this.element );
+            nodes = this.previousBody.length;
+            for ( i = 0; i < nodes; i++ ){
+                body.appendChild( this.previousBody.shift() );
+            }
+            THIS[ this.hash ].prevElementParent.insertBefore(
+                this.element,
+                THIS[ this.hash ].prevNextSibling
+            );
+            
             //If we've got a toolbar, we need to enable the user to use css to
             //reset it to its original state 
             if( this.toolbar && this.toolbar.element ){
@@ -3962,7 +3982,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                     'class',
                     this.toolbar.element.className.replace('fullpage','')
                 );
-                this.toolbar.element.style.position = 'relative';
+                //this.toolbar.element.style.position = 'relative';
                 this.toolbar.parentNode.insertBefore( 
                     this.toolbar.element,
                     this.toolbar.nextSibling
@@ -3970,17 +3990,12 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                 delete this.toolbar.parentNode;
                 delete this.toolbar.nextSibling;
 
-                this.container.style.top = 'auto';
+                //this.container.style.top = 'auto';
             }
 
-            body.removeChild( this.container );
+            this.element.style.height = THIS[ this.hash ].prevElementSize.y + 'px';
-            nodes = this.previousBody.length;
+            this.element.style.width = THIS[ this.hash ].prevElementSize.x + 'px';
-            for ( i = 0; i < nodes; i++ ){
+
-                body.appendChild( this.previousBody.shift() );
-            }
-            this.element.appendChild( this.container );
-            THIS[ this.hash ].prevContainerSize = $.getElementSize( this.element );
-            
             // mouse will likely be outside now
             $.delegate( this, onContainerExit )();      
 
@@ -4113,7 +4128,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
 
                 if( this.toolbar ){
                     this.toolbar.addControl( 
-                        this.navControl, 
+                        this.pagingControl, 
                         $.ControlAnchor.BOTTOM_RIGHT  
                     );
                 }else{
@@ -4275,6 +4290,9 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                 viewer: this
             });
         }
+        if( this.referenceStrip ){
+            this.referenceStrip.setFocus( page );
+        }
     }
 
 });
@@ -4495,7 +4513,7 @@ function updateOnce( viewer ) {
     if( viewer.referenceStrip ){
         animated = viewer.referenceStrip.update( viewer.viewport ) || animated;
     }
-    
+
     if ( !THIS[ viewer.hash ].animating && animated ) {
         viewer.raiseEvent( "animationstart" );
         abortControlsAutoHide( viewer );
@@ -6916,15 +6934,7 @@ $.ReferenceStrip = function( options ){
                      tracker.dragging &&
                      ( now - tracker.dragging ) < tracker.clickTimeThreshold ){
                     tracker.dragging = null;
-                    if ( _this.currentSelected !== tracker.element ){
+                    viewer.goToPage( page );
-                        if(_this.currentSelected){
-                            _this.currentSelected.style.background = '#000';
-                        }
-                        _this.currentSelected = tracker.element;
-                        _this.currentSelected.style.background = '#999';
-                        viewer.goToPage( page );
-                        $.getElement( tracker.element.id + '-displayregion' ).focus();
-                    }
                 }
             }
         }).setTracking( true );
@@ -6937,11 +6947,61 @@ $.ReferenceStrip = function( options ){
 
     }
     loadPanels( this, this.scroll == 'vertical' ? viewerSize.y : viewerSize.y, 0);
+    this.setFocus( 0 );
 
 };
 
 $.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototype, {
 
+    setFocus: function( page ){
+        var element = $.getElement( this.element.id + '-' + page ),
+            viewerSize = $.getElementSize( this.viewer.canvas ),
+            scrollWidth = Number(this.element.style.width.replace('px','')),
+            scrollHeight = Number(this.element.style.height.replace('px','')),
+            offsetLeft = -Number(this.element.style.marginLeft.replace('px','')),
+            offsetTop = -Number(this.element.style.marginTop.replace('px','')),
+            offset;
+
+        if ( this.currentSelected !== element ){
+            if( this.currentSelected ){
+                this.currentSelected.style.background = '#000';
+            }
+            this.currentSelected = element;
+            this.currentSelected.style.background = '#999';
+            $.getElement( element.id + '-displayregion' ).focus();
+
+            if( 'horizontal' == this.scroll ){
+                //right left
+                offset = (Number(page)) * this.panelWidth;
+                if( offset > offsetLeft + viewerSize.x - this.panelWidth){
+                    offset = Math.min(offset, (scrollWidth - viewerSize.x));
+                    this.element.style.marginLeft = -offset + 'px';
+                    loadPanels( this, viewerSize.x, -offset );
+                }else if( offset < offsetLeft ){
+                    offset = Math.max(0, offset - viewerSize.x / 2);
+                    this.element.style.marginLeft = -offset + 'px';
+                    loadPanels( this, viewerSize.x, -offset );
+                }
+            }else{
+                offset = (Number(page) ) * this.panelHeight;
+                if( offset > offsetTop + viewerSize.y - this.panelHeight){
+                    offset = Math.min(offset, (scrollHeight - viewerSize.y));
+                    this.element.style.marginTop = -offset + 'px';
+                    loadPanels( this, viewerSize.y, -offset );
+                }else if( offset < offsetTop ){
+                    offset = Math.max(0, offset - viewerSize.y / 2);
+                    this.element.style.marginTop = -offset + 'px';
+                    loadPanels( this, viewerSize.y, -offset );
+                }
+            }
+
+            this.currentPage = page;
+            onStripEnter.call( this, this.innerTracker );
+        }
+    },
+    isVisibleInReferenceStrip: function( page ){
+        return true;
+    },
     /**
      * @function
      * @name OpenSeadragon.Navigator.prototype.update
@@ -7056,7 +7116,8 @@ function onStripScroll( tracker, position, scroll, shift ) {
 
 function loadPanels(strip, viewerSize, scroll){
     var panelSize,
-        activePanels,
+        activePanelsStart,
+        activePanelsEnd,
         miniViewer,
         i;
     if( 'horizontal' == strip.scroll ){
@@ -7064,9 +7125,12 @@ function loadPanels(strip, viewerSize, scroll){
     }else{
         panelSize = strip.panelHeight;
     }
-    activePanels = Math.ceil( (Math.abs(scroll) + viewerSize ) / panelSize ) + 1;
+    activePanelsStart = Math.ceil( viewerSize / panelSize ) - 1;
+    activePanelsEnd = Math.ceil( (Math.abs(scroll) + viewerSize ) / panelSize ) + 1;
+    activePanelsStart = activePanelsEnd - activePanelsEnd;
+    activePanelsStart = activePanelsStart < 0 ? 0 : activePanelsStart;
 
-    for( i = 0; i < activePanels && i < strip.panels.length; i++ ){
+    for( i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ){
         element = strip.panels[ i ];
         if ( !element.activePanel ){
             miniViewer = new $.Viewer( {
@@ -7154,15 +7218,16 @@ function onStripExit( tracker ) {
     //tracker.element.style.border = 'none';
     //tracker.element.style.background = '#fff';
     
+
     if( 'horizontal' == this.scroll ){
     
         //tracker.element.style.paddingTop = "10px";
-        tracker.element.style.marginBottom = "-" + ( Math.floor(viewerSize.y*this.sizeRatio)*0.8 ) + "px";
+        tracker.element.style.marginBottom = "-" + ( $.getElementSize( tracker.element ).y / 2 ) + "px";
     
     } else {
     
         //tracker.element.style.paddingRight = "10px";
-        tracker.element.style.marginLeft = "-" + ( Math.floor(viewerSize.x*this.sizeRatio)*0.8 )+ "px";
+        tracker.element.style.marginLeft = "-" + ( $.getElementSize( tracker.element ).x / 2 )+ "px";
     
     }
     return false;

src/referencestrip.js

@@ -174,15 +174,7 @@ $.ReferenceStrip = function( options ){
                      tracker.dragging &&
                      ( now - tracker.dragging ) < tracker.clickTimeThreshold ){
                     tracker.dragging = null;
-                    if ( _this.currentSelected !== tracker.element ){
+                    viewer.goToPage( page );
-                        if(_this.currentSelected){
-                            _this.currentSelected.style.background = '#000';
-                        }
-                        _this.currentSelected = tracker.element;
-                        _this.currentSelected.style.background = '#999';
-                        viewer.goToPage( page );
-                        $.getElement( tracker.element.id + '-displayregion' ).focus();
-                    }
                 }
             }
         }).setTracking( true );
@@ -195,11 +187,61 @@ $.ReferenceStrip = function( options ){
 
     }
     loadPanels( this, this.scroll == 'vertical' ? viewerSize.y : viewerSize.y, 0);
+    this.setFocus( 0 );
 
 };
 
 $.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototype, {
 
+    setFocus: function( page ){
+        var element = $.getElement( this.element.id + '-' + page ),
+            viewerSize = $.getElementSize( this.viewer.canvas ),
+            scrollWidth = Number(this.element.style.width.replace('px','')),
+            scrollHeight = Number(this.element.style.height.replace('px','')),
+            offsetLeft = -Number(this.element.style.marginLeft.replace('px','')),
+            offsetTop = -Number(this.element.style.marginTop.replace('px','')),
+            offset;
+
+        if ( this.currentSelected !== element ){
+            if( this.currentSelected ){
+                this.currentSelected.style.background = '#000';
+            }
+            this.currentSelected = element;
+            this.currentSelected.style.background = '#999';
+            $.getElement( element.id + '-displayregion' ).focus();
+
+            if( 'horizontal' == this.scroll ){
+                //right left
+                offset = (Number(page)) * this.panelWidth;
+                if( offset > offsetLeft + viewerSize.x - this.panelWidth){
+                    offset = Math.min(offset, (scrollWidth - viewerSize.x));
+                    this.element.style.marginLeft = -offset + 'px';
+                    loadPanels( this, viewerSize.x, -offset );
+                }else if( offset < offsetLeft ){
+                    offset = Math.max(0, offset - viewerSize.x / 2);
+                    this.element.style.marginLeft = -offset + 'px';
+                    loadPanels( this, viewerSize.x, -offset );
+                }
+            }else{
+                offset = (Number(page) ) * this.panelHeight;
+                if( offset > offsetTop + viewerSize.y - this.panelHeight){
+                    offset = Math.min(offset, (scrollHeight - viewerSize.y));
+                    this.element.style.marginTop = -offset + 'px';
+                    loadPanels( this, viewerSize.y, -offset );
+                }else if( offset < offsetTop ){
+                    offset = Math.max(0, offset - viewerSize.y / 2);
+                    this.element.style.marginTop = -offset + 'px';
+                    loadPanels( this, viewerSize.y, -offset );
+                }
+            }
+
+            this.currentPage = page;
+            onStripEnter.call( this, this.innerTracker );
+        }
+    },
+    isVisibleInReferenceStrip: function( page ){
+        return true;
+    },
     /**
      * @function
      * @name OpenSeadragon.Navigator.prototype.update
@@ -314,7 +356,8 @@ function onStripScroll( tracker, position, scroll, shift ) {
 
 function loadPanels(strip, viewerSize, scroll){
     var panelSize,
-        activePanels,
+        activePanelsStart,
+        activePanelsEnd,
         miniViewer,
         i;
     if( 'horizontal' == strip.scroll ){
@@ -322,9 +365,12 @@ function loadPanels(strip, viewerSize, scroll){
     }else{
         panelSize = strip.panelHeight;
     }
-    activePanels = Math.ceil( (Math.abs(scroll) + viewerSize ) / panelSize ) + 1;
+    activePanelsStart = Math.ceil( viewerSize / panelSize ) - 1;
+    activePanelsEnd = Math.ceil( (Math.abs(scroll) + viewerSize ) / panelSize ) + 1;
+    activePanelsStart = activePanelsEnd - activePanelsEnd;
+    activePanelsStart = activePanelsStart < 0 ? 0 : activePanelsStart;
 
-    for( i = 0; i < activePanels && i < strip.panels.length; i++ ){
+    for( i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ){
         element = strip.panels[ i ];
         if ( !element.activePanel ){
             miniViewer = new $.Viewer( {
@@ -412,15 +458,16 @@ function onStripExit( tracker ) {
     //tracker.element.style.border = 'none';
     //tracker.element.style.background = '#fff';
     
+
     if( 'horizontal' == this.scroll ){
     
         //tracker.element.style.paddingTop = "10px";
-        tracker.element.style.marginBottom = "-" + ( Math.floor(viewerSize.y*this.sizeRatio)*0.8 ) + "px";
+        tracker.element.style.marginBottom = "-" + ( $.getElementSize( tracker.element ).y / 2 ) + "px";
     
     } else {
     
         //tracker.element.style.paddingRight = "10px";
-        tracker.element.style.marginLeft = "-" + ( Math.floor(viewerSize.x*this.sizeRatio)*0.8 )+ "px";
+        tracker.element.style.marginLeft = "-" + ( $.getElementSize( tracker.element ).x / 2 )+ "px";
     
     }
     return false;

src/viewer.js

@@ -552,7 +552,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
      * @return {Boolean}
      */
     isFullPage: function () {
-        return this.container.parentNode == document.body;
+        return this.element.parentNode == document.body;
     },
 
 
@@ -569,7 +569,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
         var body            = document.body,
             bodyStyle       = body.style,
             docStyle        = document.documentElement.style,
-            containerStyle  = this.container.style,
+            containerStyle  = this.element.style,
             canvasStyle     = this.canvas.style,
             oldBounds,
             newBounds,
@@ -598,7 +598,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             canvasStyle.backgroundColor = "black";
             canvasStyle.color           = "white";
 
-            containerStyle.position = "fixed";
+            //containerStyle.position = "fixed";
 
             //when entering full screen on the ipad it wasnt sufficient to leave
             //the body intact as only only the top half of the screen would 
@@ -606,6 +606,9 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             //them as touch events on the document body.  Thus we remove and store
             //the bodies elements and replace them when we leave full screen.
             this.previousBody = [];
+            THIS[ this.hash ].prevElementParent = this.element.parentNode;
+            THIS[ this.hash ].prevNextSibling = this.element.prevNextSibling;
+            THIS[ this.hash ].prevElementSize = $.getElementSize( this.element );
             nodes = body.childNodes.length;
             for ( i = 0; i < nodes; i ++ ){
                 this.previousBody.push( body.childNodes[ 0 ] );
@@ -627,14 +630,21 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                     'class',
                     this.toolbar.element.className +" fullpage"
                 );
-                this.toolbar.element.style.position = 'fixed';
+                //this.toolbar.element.style.position = 'fixed';
 
-                this.container.style.top = $.getElementSize(
+                //this.container.style.top = $.getElementSize(
-                    this.toolbar.element
+                //    this.toolbar.element
-                ).y + 'px';
+                //).y + 'px';
             }
-            body.appendChild( this.container );
+            body.appendChild( this.element );
-            THIS[ this.hash ].prevContainerSize = $.getWindowSize();
+            if( this.toolbar && this.toolbar.element ){
+                this.element.style.height = (
+                    $.getWindowSize().y - $.getElementSize( this.toolbar.element ).y
+                ) + 'px';
+            }else{
+                this.element.style.height = $.getWindowSize().y + 'px';
+            }
+            this.element.style.width = $.getWindowSize().x + 'px';
 
             // mouse will be inside container now
             $.delegate( this, onContainerEnter )();    
@@ -651,9 +661,19 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             canvasStyle.backgroundColor = "";
             canvasStyle.color           = "";
 
-            containerStyle.position = "relative";
+            //containerStyle.position = "relative";
-            containerStyle.zIndex   = "";
+            //containerStyle.zIndex   = "";
 
+            body.removeChild( this.element );
+            nodes = this.previousBody.length;
+            for ( i = 0; i < nodes; i++ ){
+                body.appendChild( this.previousBody.shift() );
+            }
+            THIS[ this.hash ].prevElementParent.insertBefore(
+                this.element,
+                THIS[ this.hash ].prevNextSibling
+            );
+            
             //If we've got a toolbar, we need to enable the user to use css to
             //reset it to its original state 
             if( this.toolbar && this.toolbar.element ){
@@ -665,7 +685,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                     'class',
                     this.toolbar.element.className.replace('fullpage','')
                 );
-                this.toolbar.element.style.position = 'relative';
+                //this.toolbar.element.style.position = 'relative';
                 this.toolbar.parentNode.insertBefore( 
                     this.toolbar.element,
                     this.toolbar.nextSibling
@@ -673,17 +693,12 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                 delete this.toolbar.parentNode;
                 delete this.toolbar.nextSibling;
 
-                this.container.style.top = 'auto';
+                //this.container.style.top = 'auto';
             }
 
-            body.removeChild( this.container );
+            this.element.style.height = THIS[ this.hash ].prevElementSize.y + 'px';
-            nodes = this.previousBody.length;
+            this.element.style.width = THIS[ this.hash ].prevElementSize.x + 'px';
-            for ( i = 0; i < nodes; i++ ){
+
-                body.appendChild( this.previousBody.shift() );
-            }
-            this.element.appendChild( this.container );
-            THIS[ this.hash ].prevContainerSize = $.getElementSize( this.element );
-            
             // mouse will likely be outside now
             $.delegate( this, onContainerExit )();      
 
@@ -816,7 +831,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
 
                 if( this.toolbar ){
                     this.toolbar.addControl( 
-                        this.navControl, 
+                        this.pagingControl, 
                         $.ControlAnchor.BOTTOM_RIGHT  
                     );
                 }else{
@@ -978,6 +993,9 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                 viewer: this
             });
         }
+        if( this.referenceStrip ){
+            this.referenceStrip.setFocus( page );
+        }
     }
 
 });
@@ -1198,7 +1216,7 @@ function updateOnce( viewer ) {
     if( viewer.referenceStrip ){
         animated = viewer.referenceStrip.update( viewer.viewport ) || animated;
     }
-    
+
     if ( !THIS[ viewer.hash ].animating && animated ) {
         viewer.raiseEvent( "animationstart" );
         abortControlsAutoHide( viewer );

www/ui-collections.html

@@ -2,16 +2,14 @@
 
 <div class="description">
     <p>
-    A tile source collections is really just another way of viewing a
+    An image reference strip allows the user to quickly preview and navigate a
-    sequence of tile sources, though instead of viewing one at a time
+    sequence of images.
-    the user is able to view many tile sources at the same time. At this
-    point in time it supports a matrix layout of N by M rows.
     </p>
 </div>
 
 <div class="demoarea">
     <div class="demoheading">
-        A 1 by 2 tile collection.
+        Horizontal Scrolling Image Reference Strip
     </div>
     <div id="contentDiv" 
          class="openseadragon"></div>
@@ -76,12 +74,15 @@
 </script>
 
 <p>
-The relevant configuration options are shown below. Note the value for the options
+The relevant configuration options are shown below.
-are the id of the element on the page to bind the button's action to.
 </p>
 
 <pre>
-    TODO
+    OpenSeadragon({
+        ...
+        showReferenceStrip:  true,
+        ...
+    });
 </pre>
 
 <h2>example: vertical scrolling</h2>
@@ -107,8 +108,10 @@ are the id of the element on the page to bind the button's action to.
         id:            "contentDiv2",
         prefixUrl:     "/openseadragon",
         toolbar:       "toolbarDiv",
-        showReferenceStrip:   true,
+        springStiffness:        10,
-        referenceStripScroll: 'vertical',
+        showReferenceStrip:     true,
+        autoHideControls:       false,
+        referenceStripScroll:   'vertical',
         tileSources:    [{
             type: 'legacy-image-pyramid',
             levels:[{
@@ -162,5 +165,14 @@ are the id of the element on the page to bind the button's action to.
 </script>
 
 <p>
-TODO
+The relevant configuration options are shown below.
-</p>
+</p>
+
+<pre>
+    OpenSeadragon({
+        ...
+        showReferenceStrip:  true,
+        referenceStripScroll:   'vertical',
+        ...
+    });
+</pre>