openseadragon/www/ui-collections.html

<h2>example: tilesource collections</h2>

<div class="description">
    <p>
    A tile source collections is really just another way of viewing a
    sequence of tile sources, though instead of viewing one at a time
    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.
    </div>
    <div id="contentDiv" 
         class="openseadragon"></div>
</div>

<script type="text/javascript">

    OpenSeadragon({
        id:             "contentDiv",
        prefixUrl:      "/openseadragon",
        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. Note the value for the options
are the id of the element on the page to bind the button's action to.
</p>

<pre>
    TODO
</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",
        toolbar:       "toolbarDiv",
        showReferenceStrip:   true,
        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>
TODO
</p>