問題與.draggable（）和更改不同大小的圖像

Question

我試圖做一些「縮放」-funktion（加載更大的圖像）在jQuery中，同時能夠拖動圖像（.draggable）中一個更小的div。但是我遇到了一個小問題。

當我達到最大縮放比例（可以說第三個圖像，高度約爲300px +寬度比第一個寬度高1600px），然後將自己置於右下角，然後開始縮小：我是然後卡在那個角落，而我看到圖像本身變小，給我一個白色的空白空間，圖像是在那之後不可裁剪（可以這麼說）。

但是，如果我然後向我替換的圖像添加.css（{'left'：'0px'，'top'：'0px'}），我會飛回到左上角，並且可以拖動所有我想要。但顯然我想留在我想要放大的地方。

如果我更改（代碼中較低的代碼）「containment：[data]」爲「containment：」parent「我可以」停留「在放大和縮小的某個區域中，但當我進入一個角落時（但我可以再次拖動圖片），我仍然會得到白色的空白區域，並且它的成本不再是平滑的全景感 - 更像是它捕捉到邊緣。這是一個很好的解決方案，或者是有更好的方法來實現這樣的東西。我已經嘗試使用.animate（）方法來解決這個問題，並使一張照片變大，但最終我得到同樣的問題。

<div id="map"> // 900px in width and 300px in height and Overflow: hidden in css to keep larger images inside 

    <img id="map-image" src="images/hogf_zoom0.jpg" /> // same as #map until zoom1.jpg wich is slightly larger 

    </div> 

    <div id="zoomPanel"> 

    <a href="#" class="zoomIn">+</a> 
    <a href="#" class="zoomOut">-</a> 

    </div> 

-

var zoom = 0; 
    var maxZoom = 3; 

    $('.zoomIn').click(function() { 
    if (zoom >= 0 && zoom < maxZoom) { 
     zoom++; 
     $("#map-image").attr("src", "images/hogf_zoom" + zoom + ".jpg").css({'top': '-0px','left': '0px'}); 
     if (zoom > 0) { $("#zoomPanel .zoomOut").show(); } 
    } 
    }); 

    $('.zoomOut').click(function() { 
    if (zoom <= maxZoom && zoom > 0) { 
     zoom--; 
     $("#map-image").attr("src", "images/hogf_zoom" + zoom + ".jpg").css({'top': '-0px','left': '0px'}); 

     if (zoom == 0) { $("#zoomPanel .zoomOut").hide(); } 
    } 
    }); 

    $('#map img').load(function() { 
    var mapWidth = $("#map").width(); 
    var mapHeight = $("#map").height(); 
    var imgPos = $("#map-image").offset(); 
    var mapPos = $("#map").offset(); 
    var imgWidth = $("#map-image").width(); 
    var imgHeight = $("#map-image").height(); 

    var x1 = ((1 + mapWidth) - imgWidth) + mapPos.left; 
    var y1 = (11 + mapHeight) - imgHeight; 
    var x2 = imgPos.left; 
    var y2 = imgPos.top; 

    $("#map img").draggable({ 
     containment: [x1,y1,x2,y2], 
     cursor: 'move' 
    }); 

    }); 

感謝您的任何類型的輸入。

依照訂購，演示： http://miyao.eu/zoomzoom/

Answer 1

我花了一點，但如果你保存圖像的中心位置，那意思就是下一個圖像你得到一個比較好的結果。我還必須檢查產生的位置以確保它位於視口內。

我將縮放鏈接改爲按鈕，使其更易於點擊。

這是demo。

$(document).ready(function() { 

    var zoom = 0, 
    maxZoom = 2, 
    last = [], 
    $img = $('#map-image'), 
    $map = $('#map'), 
    map = [$map.offset().left, $map.offset().top, $map.width(), $map.height()], 
    getDim = function() { 
     var w = $img.width(), 
     h = $img.height(), 
     x = $img.offset().left - map[0], 
     y = $img.offset().top - map[1]; 
     // save dimensions & calculate % image middle 
     return [x, y, w, h, -(x - map[2]/2)/w, -(y - map[3]/2)/h]; 
    }; 

    $('.zoomIn').click(function(){ 
    if (zoom >= 0 && zoom < maxZoom) { 
     zoom++; 
     last = getDim(); 
     $("#map-image").attr("src", "zoom" + zoom + ".jpg"); 
     if (zoom > 0) { 
     $("#zoomPanel .zoomOut").removeAttr('disabled'); 
     } 
     if (zoom === maxZoom) { 
     $('#zoomPanel .zoomIn').attr('disabled', 'disabled'); 
     } 
    } 
    }); 

    $('.zoomOut').click(function(){ 
    if (zoom <= maxZoom && zoom > 0) { 
     zoom--; 
     last = getDim(); 
     $("#map-image").attr("src", "zoom" + zoom + ".jpg"); 
     if (zoom === 0) { 
     $("#zoomPanel .zoomOut").attr('disabled', 'disabled'); 
     } 
    } 
    $('#zoomPanel .zoomIn').removeAttr('disabled'); 
    }); 

    // Load image and make it panoramable 
    $img.load(function(){ 

    var size = getDim(), 
     // calculate new postion from previous center 
     x = Math.round(-size[2] * last[4] + map[2]/2), 
     y = Math.round(-size[3] * last[5] + map[3]/2); 

    $img 
     .css({ 
     left: (-x + map[2] > size[2]) ? map[2] - size[2] : (x > 0) ? 0 : x, // check ranges 
     top: (-y + map[3] > size[3]) ? map[3] - size[3] : (y > 0) ? 0 : y 
     }) 
     .draggable({ 
     containment: [map[0] + map[2] - size[2], map[1] + map[3] - size[3], map[0], map[1]], 
     cursor: 'move' 
     }); 

    }); 

});