ZoomMarker
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZoomMarker_Demo</title>

    <link rel="stylesheet" href="css/zoom-marker.css">
    <link rel="stylesheet" href="css/easy-loading.css">

    <style>
        .zoom-marker-navigator{
            width: 100%;
            margin: 10px;
            text-align: center;
        }
    </style>

</head>
<body>

<div class="zoom-marker-navigator">
    <button id="zoom-marker-btn-switch">switch picture</button>
    <button id="zoom-marker-btn-clean">clean marker</button>
    <button id="zoom-marker-btn-loading">show loader</button>
    <button id="zoom-marker-btn-enable-drag">disable drag</button>
    <button id="zoom-marker-btn-reset">reset</button>
</div>

<div id="zoom-marker-div" class="zoom-marker-div">
    <img class="zoom-marker-img" id="zoom-marker-img" alt="zoom-marker-img" name="zoom-marker-img"  draggable="false"/>
    <img class="zoom-marker-img" id="zoom-marker-img-alt" alt="zoom-marker-img-alt" name="zoom-marker-img-alt"  draggable="false"/>
</div>

</body>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/hammer.min.js"></script>

<script src="js/zoom-marker.min.js"></script>
<script src="js/easy-loading.js"></script>

<script>

    /******************* init navigator button, no need for users' initialization *********************/
    var picTag = 0;
    var tagNumber = 1;
    $('#zoom-marker-btn-switch').click(function(e){
        $('#zoom-marker-img').zoomMarker_CleanMarker();
        if(picTag===0){
            $('#zoom-marker-img').zoomMarker_LoadImage("img/rail.jpg");
        }
        else if(picTag===1){
            $('#zoom-marker-img').zoomMarker_LoadImage("img/mountain.jpg");
        }
        picTag = 1-picTag;
    });

    $('#zoom-marker-btn-clean').click(function(e){
        $('#zoom-marker-img').zoomMarker_CleanMarker();
        $('#zoom-marker-img').zoomMarker_CanvasClean();
    });

    // this array stores the styles for EASY-LOADING
    var styleList = [
        "BALL_PULSE",
        "BALL_CLIP_ROTATE", "BALL_CLIP_ROTATE_PULSE", "SQURE_SPIN", "BALL_CLIP_ROTATE_MULTIPLE",
        "BALL_PULSE_RISE", "BALL_ROTATE", "CUBE_TRANSITION", "BALL_ZIP_ZAG", "BALL_ZIP_ZAG_DEFLECT",
        "BALL_TRIANGLE_PATH", "BALL_SCALE", "LINE_SCALE", "LINE_SCALE_PARTY", "BALL_SCALE_MULTIPLE",
        "BALL_PULSE_SYNC", "BALL_BEAT", "LINE_SCALE_PULSE_OUT", "LINE_SCALE_PULSE_OUT_RAPID",
        "BALL_SCALE_RIPPLE", "BALL_SCALE_RIPPLE_MULTIPLE", "BALL_SPIN_FADE_LOADER", "LINK_SPIN_FADE_LOADER",
        "TRIANGLE_SKEW_SPIN", "PACMAN", "SEMI_CIRCLE_SPIN"
    ];

    var stylePosition = 0;
    $('#zoom-marker-btn-loading').click(function(e){
        EasyLoading.show({
            text: $("<span>"+styleList[stylePosition]+"</span>"),
            button:$("<span>dismiss</span>"),
            type: EasyLoading.TYPE[styleList[stylePosition]],
            //timeout: EasyLoading.TIMEOUT.FAST,
            callback: function(event, data){
                switch(event){
                    case 'on_btn_click' : console.log(data); break;
                    case 'on_loaded' : console.log("callback with options:"+JSON.stringify(data)); break;
                }
            }
        });
        if(++stylePosition>=styleList.length)
            stylePosition = 0;
    });

    var isEnableDrag = true;
    $('#zoom-marker-btn-enable-drag').click(function(e) {
        isEnableDrag = !isEnableDrag;
        $('#zoom-marker-img').zoomMarker_EnableDrag(isEnableDrag);
        if(isEnableDrag) {
            $('#zoom-marker-btn-enable-drag').text('disable drag');
        } else {
            $('#zoom-marker-btn-enable-drag').text('enable drag');
        }
    });

    $('#zoom-marker-btn-reset').click(function(e) {
        $('#zoom-marker-img').zoomMarker_ResetImage();
    });

    // init item
    var initImg = function(item) {
        // handle "TAP" event and add marker to image
        item.on("zoom_marker_mouse_click", function(event, position){
            console.log("Mouse click on: "+JSON.stringify(position));
            const marker = item.zoomMarker_AddMarker({
                src:"img/marker.svg",
                x:position.x,
                y:position.y,
                size:30,
                dialog:{},
                hint:{value:tagNumber, style:{color:"#ffffff", left:"10px"}}
            });
            // 手动配置dialog
            marker.param.dialog = {
                value: "<h4>content for dialog_"+tagNumber+"</h4>",
                offsetX: 20,
                style: {
                    "border-color": "#86df5f"
                }
            };
            // 画线
            const context = item.zoomMarker_Canvas();
            if(context !== null) {
                context.strokeStyle = 'red';
                context.moveTo(position.x, position.y);
                context.lineTo(100,100);
                context.stroke();
            }
            if(++tagNumber>=10)
                tagNumber=1;
        });

        // listen to marker click event, print to console and delete the marker
        item.on("zoom_marker_click", function(event, marker){
            console.log(JSON.stringify(marker));
            $('#zoom-marker-img').zoomMarker_RemoveMarker(marker.id);
        });

        // message for the beginning of image loading process
        item.on("zoom_marker_img_load", function(event, src){
            console.log("loading started for image : "+src);
            EasyLoading.show({
                text: $("<span>loading image</span>"),
                button:$("<span>dismiss</span>"),
                type: EasyLoading.TYPE.PACMAN
            });
        });

        // message for image loaded
        item.on("zoom_marker_img_loaded", function(event, size){
            console.log("image has been loaded with size: "+JSON.stringify(size));
            // we have to set a timer in order to watching the loader in local environment, cause the loading speed is too fast
            setTimeout(function(){
                EasyLoading.hide();
            }, 3000);
            item.zoomMarker_AddMarker({
                src:"img/marker.svg",
                x:300,
                y:300,
                size:40,
                dialog:{
                    value: "i was added on 'zoom_marker_img_loaded' event",
                    style: {
                        color: "red"
                    }
                },
                hint:{value:'M', style:{color:"#ffffff", left:"12px"}}
            });
        });

        // message after at the end of Maker moving action
        item.on("zoom_marker_move_end", function(event, position){
            console.log("Marker moving ended on :" + JSON.stringify(position));
        })
    }

    initImg($('#zoom-marker-img'));
    initImg($('#zoom-marker-img-alt'));

    /******************** INIT ZoomMarker here *****************************/
    $(document).ready(function () {
        $('#zoom-marker-img-alt').zoomMarker({
            src: "img/rail.jpg",
            rate: 0.2,
            width: 600,
            max: 3000,
            markers:[
                {src:"img/marker.svg", x:300, y:300}
            ]
        });

        $('#zoom-marker-img').zoomMarker({
            src: "img/mountain.jpg",
            rate: 0.2,
            width: 400,
            max: 3000,
            markers:[
                {src:"img/marker.svg", x:200, y:200, draggable:false}
            ],
            enable_canvas: true,
            move_limit: true
        });
    })
    /******************** INIT ZoomMarker here *****************************/

</script>

</html>