---

How to use

html

<div id="zoom_basic"></div>

javascript1 (create zoomer object)

var sampleBasic = function(){
    //Create Zoomer object
    var zmBasic = new FlexZoomer({containerId: "zoom_basic"});
    
    //common range for each zoom level 
    var range = {x: {min: -10, max: 10}, y: {min: -10, max: 10}};
    
    //Define each zoom Level
    zmBasic.zoomLevels([
        {//level 0
            tileSize : {w: 50, h: 50},
            range : range,
            drawFunc : draw1,
        },
        {//level 1
            tileSize : {w: 100, h: 100},
            range : range,
            drawFunc : draw1,
        },
        {//level 2
            tileSize : {w: 200, h: 200},
            range : range,
            drawFunc : draw1,
        },
        ...
    ]);

    //initial level is 0
    zmBasic.position(0);
};

javascript2 (define draw function for each tile)

var draw1 = function(tile){
    var val = Math.abs(tile.pos.x + tile.pos.y) % 3;
    
    var font = Math.floor(tile.size.w / 6) + "px 'Times New Roman'";
    var fill_style = getColor(tile.pos.x, tile.pos.y);
    
    tile.div
        .css("font", font)
        .css("text-align", "center")
        .css("color", "#000000")
        .css("background-color", fill_style)
        .css("opacity", 0.9);
    
    tile.image = $("")
        .attr("src", "images/building.jpg")
        .css("width", tile.size.w)
        .css("height", tile.size.h)
        .appendTo(tile.div);
};

Tile object

This has following properties.

• div -> Html element of tile.
• draw -> Fire drawFunc.
• drawFunc -> Function for drawing tile.
• pos -> Tile index. This has property "x" and "y".
• remove -> Function for remove tile.
• size -> Pixel size. This has property "w" and "h".