<h2>example: tilesource reference strip</h2>

<div class="description">
    <p>
    An image reference strip allows the user to quickly preview and navigate a
    sequence of images.
    </p>
</div>

<div class="demoarea">
    <div class="demoheading">
        Horizontal Scrolling Image Reference Strip
    </div>
    <div id="contentDiv" 
         class="openseadragon"></div>
</div>

<script type="text/javascript">

    OpenSeadragon({
        id:             "contentDiv",
        prefixUrl:      "/openseadragon/images/",
        showReferenceStrip:  true,
        tileSources:    [{
            type: 'legacy-image-pyramid',
            levels:[{
                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
                height: 889,
                width:  600
            },{
                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
                height: 2201,
                width:  1485
            },{
                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
                height: 4402,
                width:  2970
                
            }]
        },{
            type: 'legacy-image-pyramid',
            levels:[{
                url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801t.gif',
                height: 150,
                width:  116
            },{
                url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801q.jpg',
                height: 400,
                width:  310
            },{
                url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801r.jpg',
                height: 860,
                width:  667
            },{
                url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801v.jpg',
                height: 1650,
                width:  1279
                
            }],
        },
            "/openseadragon/examples/images/highsmith/highsmith.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05955.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05956.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05958.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05959.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05960.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05961.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05962.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05963.dzi"
        ]
    });
</script>

<p>
The relevant configuration options are shown below.
</p>

<pre>
    OpenSeadragon({
        ...
        showReferenceStrip:  true,
        ...
    });
</pre>

<h2>example: vertical scrolling</h2>

<div class="description">
    <p>
    This example demonstrates the configuration options which enable a vertical
    scrolling image reference strip.
    </p>
</div>

<div class="demoarea">
    <div class="demoheading">
        Vertical Scrolling Image Reference Strip
    </div>
    <div id="toolbarDiv" class="toolbar">
    </div>
    <div id="contentDiv2" class="openseadragon"></div>
</div>

<script type="text/javascript">
    OpenSeadragon({
        id:            "contentDiv2",
        prefixUrl:     "/openseadragon/images/",
        toolbar:       "toolbarDiv",
        springStiffness:        10,
        showReferenceStrip:     true,
        autoHideControls:       false,
        referenceStripScroll:   'vertical',
        tileSources:    [{
            type: 'legacy-image-pyramid',
            levels:[{
                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
                height: 889,
                width:  600
            },{
                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
                height: 2201,
                width:  1485
            },{
                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
                height: 4402,
                width:  2970
                
            }]
        },{
            type: 'legacy-image-pyramid',
            levels:[{
                url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801t.gif',
                height: 150,
                width:  116
            },{
                url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801q.jpg',
                height: 400,
                width:  310
            },{
                url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801r.jpg',
                height: 860,
                width:  667
            },{
                url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801v.jpg',
                height: 1650,
                width:  1279
                
            }],
        },
            "/openseadragon/examples/images/highsmith/highsmith.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05955.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05956.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05958.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05959.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05960.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05961.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05962.dzi",
            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05963.dzi"
        ]
    });
</script>

<p>
The relevant configuration options are shown below.
</p>

<pre>
    OpenSeadragon({
        ...
        showReferenceStrip:  true,
        referenceStripScroll:   'vertical',
        ...
    });
</pre>