image - Hammer.jsピンチツーズームが機能しない

Question

更新: @ http://jsfiddle.net/gacDy/7/でjsfiddleを取得しましたが、これを正しく機能させることさえできないようです。まだまだ頑張りますが、お役に立てれば幸いです。

私Hammer.jsが取り組んでいるアプリに使用しています。今のところ、これを機能させる方法を理解するために使用している Web のどこかで入手したデモがあります。デモのために、私はhammer.js.

現在のところ、両方の画像がズームされていますが、2 番目の画像は最初の画像の領域にズームされています。(以下のスクリーンショットを参照)

ズーム前の画像:

ズーム後の画像:

画像のコード:

<div id="zoom2">
<img src="Chrysanthemum.jpg" alt="" width="600" height="377" />
</div>
<div id="zoom">
<img src="waldo.jpg" alt="" width="600" height="377" />
</div>

機能など：

<div id="debug"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="hammer.js"></script>
<script src="jquery.hammer.js"></script>
<script src="jquery.specialevent.hammer.js"></script>
<script>

var debug_el = $("#debug");

// disable the dragging of images on desktop browsers
$("img").bind("dragstart", function() {
    return false;
});


$(function(){
    var zoom = new ZoomView('#zoom','#zoom :first');
});


function ZoomView(container, element) {

    container = $(container).hammer({
        prevent_default: true,
        scale_treshold: 0,
        drag_min_distance: 0
    });

    element = $(element);


    // prefixes
    var vendorPrefixes = ["", "-webkit-", "-moz-", "-o-", "-ms-", "-khtml-"];

    var displayWidth = container.width();
    var displayHeight = container.height();

    //These two constants specify the minimum and maximum zoom
    var MIN_ZOOM = 1;
    var MAX_ZOOM = 5;

    var scaleFactor = 1;
    var previousScaleFactor = 1;

    //These two variables keep track of the X and Y coordinate of the finger when it first
    //touches the screen
    var startX = 0;
    var startY = 0;

    //These two variables keep track of the amount we need to translate the canvas along the X
    //and the Y coordinate
    var translateX = 0;
    var translateY = 0;

    //These two variables keep track of the amount we translated the X and Y coordinates, the last time we
    //panned.
    var previousTranslateX = 0;
    var previousTranslateY = 0;

    //Translate Origin variables

    var tch1 = 0, 
        tch2 = 0, 
        tcX = 0, 
        tcY = 0,
        toX = 0,
        toY = 0,
        cssOrigin;

    var last_drag_event;

    container.bind("transformstart", function(event){
        //We save the initial midpoint of the first two touches to say where our transform origin is.
        tch1 = [event.touches[0].x, event.touches[0].y];
        tch2 = [event.touches[1].x, event.touches[1].y];

        tcX = (tch1[0]+tch2[0])/2;
        tcY = (tch1[1]+tch2[1])/2;

        toX = tcX;
        toY = tcY;

        cssOrigin = toX +"px "+ toY +"px";
    });

    container.bind("transform", function(event) {
        scaleFactor = previousScaleFactor * event.scale;
        scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));

        transform(event);
    });

    container.bind("transformend", function(event) {
        previousScaleFactor = scaleFactor;
    });

    container.bind("drag", function(event) {
        cssOrigin = (toX + (toX-event.position.x) / scaleFactor) +"px " +
                    (toY + (toY-event.position.y) / scaleFactor) +"px";

        transform(event);
        last_drag_event = event;
    });

    container.bind("dragend", function(event) {
        toX += ((toX - last_drag_event.position.x) / scaleFactor);
        toY += ((toY - last_drag_event.position.y) / scaleFactor);


        cssOrigin = toX +"px "+ toY +"px";
        transform(event);

        debug_el.text('TX: '+toX+' TY: '+toY);
    });


    function transform(event) {
        //We're going to scale the X and Y coordinates by the same amount
        var cssScale = "scale("+ scaleFactor +")";

        var props = {};
        $(vendorPrefixes).each(function(i, vendor) {
            props[vendor +"transform"] = cssScale;
            props[vendor +"transform-origin"] = cssOrigin;
        });
        element.css(props);


        debug_el.text('TX: '+translateX+' TY: '+translateY+' '+element.css('-webkit-transform-origin'))
    }

}
</script>

-- 上記のコードを複製し、2 番目の画像をズーム可能にするために、最初の画像への参照を 2 番目の画像を参照するように変更しました。しかし、私が述べたように、それは正しく機能していません。この重複を引き起こしている可能性のある最初の画像への参照を逃した場合に備えて、すべての変数名を変更しようとしましたが、何も役に立ちませんでした。

編集:これも関連する可能性があります:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
    #zoom {
        height: 377px;
        width: 600px;
        overflow: hidden;
        position:relative;
        background: #eee;
        border: solid 1px #ccc;
    }
</style>
<meta name="viewport2" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
    #zoom2 {
        height: 377px;
        width: 600px;
        overflow: hidden;
        position:static;
        background: #eee;
        border: solid 1px #ccc;
    }
</style>

ズーム時に2番目の画像が1番目の画像に消えないようにする方法を理解するのに助けが必要です。私が得ることができる助けをいただければ幸いです。皆さんありがとう。