Seadragon-ajax pure javascript viewer for Gigapan tile sets

  • I am trying to use Seadragon-ajax javascript viewer for Gigapan tile sets in my post. Someone is nice enough to show me how to do it:

    FULL HTML:

    <!DOCTYPE html>
    <html>
    <head>
    <script type=”text/javascript” src=”https://seadragon.com/ajax/0.8/seadragon-min.js”></script&gt;
    <script language=”JavaScript” type=”text/javascript” src=”js/GigapanSchemaTileSource.js”></script>
    <script type=”text/javascript”>
    var viewer = null;
    function init() {
    viewer = new Seadragon.Viewer(“container”);
    Seadragon.Config.imageLoaderLimit = 6;

    //this sets up the tile source data using the Gigapan Schema
    // the function expects (url of image pyramid {above /tiles/}, width, height)
    var imageTileSource = new GigapanSchemaTileSource(‘https://peterchanphoto.com/gigapixel/Memorial Church.data’, 34787, 13891);

    // this tells the seadragon viewer to open the imageTileSource object
    viewer.openTileSource(imageTileSource);

    }

    Seadragon.Utils.addEvent(window, “load”, init);
    </script>

    <style type=”text/css”>
    #container
    {
    width: 500px;
    height: 400px;
    background-color: black;
    border: 1px solid black;
    color: white; /* for error messages, etc. */
    }
    </style>
    </head>

    <body>
    <div id=”container”></div>
    </body>
    </html>

    You need to be sure to include this file under your js directory (named GigapanSchemaTileSource.js):

    //From the minds of Jason Buchheim and Chris Bartley
    GigapanSchemaTileSource.prototype = new Seadragon.TileSource();
    GigapanSchemaTileSource.prototype.constructor = GigapanSchemaTileSource;

    function GigapanSchemaTileSource(baseurl, width, height)
    {
    Seadragon.TileSource.call(this, width, height, 256, 0, 8);
    this.gigapanurl = baseurl;
    this.getTileUrl = function(level, x, y)
    {
    if (level >= 8)
    {
    level = level – 8;
    }
    var url = this.gigapanurl + ‘/tiles’;
    var GC_TILE = [“0”, “1”, “2”, “3”];
    var name = “r”;
    var bit = 1 << level >> 1;
    while (bit)
    {
    name = name + GC_TILE[(x & bit ? (1) : (0)) + (y & bit ? (2) : (0))];
    bit = bit >> 1;
    }
    var i = 0;
    while (i < name.length – 3)
    {
    url = url + (“/” + name.substr(i, 3));
    i = i + 3;
    }
    return (url + “/” + name + ‘.jpg’);
    };

    this.getTileBounds = function(level, x, y)
    {
    var self = this;
    var dimensionsScaled = self.dimensions.times(self.getLevelScale(level));
    var px = (x === 0) ? 0 : self.tileSize * x – self.tileOverlap;
    var py = (y === 0) ? 0 : self.tileSize * y – self.tileOverlap;
    var sx = self.tileSize + (x === 0 ? 1 : 2) * self.tileOverlap;
    var sy = self.tileSize + (y === 0 ? 1 : 2) * self.tileOverlap;
    var scale = 1.0 / dimensionsScaled.x;
    return new Seadragon.Rect(px * scale, py * scale, sx * scale, sy * scale);
    };
    }

    I copied the “FULL HTML” in an entry in my wordpress and created the javascript code in my js directory. However, it didn’t work. The person who shown me the code said I had to be sure to put this code in your <head> region of your page (not in the individual posts)

    <script type=”text/javascript” src=”https://seadragon.com/ajax/0.8/seadragon-min.js”></script&gt;
    <script language=”JavaScript” type=”text/javascript” src=”https://peterchanphoto.com/js/GigapanSchemaTileSource.js”></script&gt;

    Since he doesn’t know WordPress and I just use wordpress without knowing programming, I hope someone will be nice enough to tell me what I should do with the coding in WordPress.

    Thanks in advance for any help.

    Peter
    my WordPress is in peterchanphoto.com

  • The topic ‘Seadragon-ajax pure javascript viewer for Gigapan tile sets’ is closed to new replies.