Увеличение/уменьшение изображения не работает должным образом при позиционировании изображения

Question

У меня есть следующий код для увеличения изображения. Проблема заключается в том, когда я пытаюсь позиционировать изображение в соответствии с моей потребностью, то есть я применяю маржи слева к изображению или контейнеру изображения, то есть #view он влияет на увеличение изображения (в/в) - при увеличении изображения изображение начинает перемещаться влево (из-за поля) как вы можете видеть на приведенной ниже ссылке. Удаление оставшегося поля делает это снова хорошим. Я хочу разместить его в желаемом месте, не влияя на увеличение. Пожалуйста, дайте мне знать, если я не знаю.

jsfiddle

/*style.css*/ 

    #view { 
     border: 1px solid #333333 ; 
     overflow: hidden ; 
     position: relative ; 
     width: 400px ; 
     /*giving margin left to move image to the center*/ 
     margin-left: 400px; 
     } 

     .imageZoomInOut { 
     display: block ; 
     left: 0px ; 
     top: 0px ; 
     } 

     #zoom { 
     background-imageZoomInOut: url("./white_fade.png") ; 
     border: 1px solid #000000 ; 
     cursor: pointer ; 
     display: none ; 
     height: 200px ; 
     position: absolute ; 
     width: 200px ; 
     z-index: 100 ; 
     } 

//******************** js ******************* 

// When the WINDOW is ready, initialize. We are going with 
    // the window load rather than the document so that we 
    // know our imageZoomInOut will be ready as well (complete with 
    // gettable dimentions). 
    $(document).ready(function(){ 

    // First, let's get refernces to the elements we will 
    // be using. 
    var view = $("#view"); 
    var imageZoomInOut = $(".imageZoomInOut"); 

    // Create the ZOOM element - this will be added with 
    // Javascript since it's more of an "effect". 
    var zoom = $("<a id='zoom'><span><br /></span></a>"); 

    // Before we start messing with the scripts, let's 
    // update the display to allow for the absolute 
    // positioning of the imageZoomInOut and zoomer. 

    // Set an explicit height/width on the view based 
    // on the initial size of the imageZoomInOut. 
    view.width(imageZoomInOut.width()); 
    view.height(imageZoomInOut.height()); 

    // Now that the view has an explicit width and height, 
    // we can change the displays for positioning. 
    imageZoomInOut.css("position", "absolute"); 

    // Set an exlicit height on the imageZoomInOut (to make sure 
    // that some of the later calcualtions don't get 
    // messed up - I saw some irradic caculated-height 
    // behavior). 
    imageZoomInOut.height(imageZoomInOut.height()); 

    // Before we add the zoom square, we need it to match 
    // the aspect ratio of the imageZoomInOut. 
    zoom.width(Math.floor(imageZoomInOut.width()/2)); 
    zoom.height(Math.floor(imageZoomInOut.height()/2)); 

    // Now, add the zoom square to the view. 
    view.append(zoom); 


    // ---------------------------------------------- // 
    // ---------------------------------------------- // 


    // Now that we have our UI set up physically, we need 
    // to bind the event handlers. 

    // We want to show and hide the zoom only when the 
    // user hovers over the view. 
    view.hover(
    function(event){ 
    // Show the soom. 
    zoom.show(); 
    }, 
    function(event){ 
    // Hide the zoom. 
    zoom.hide(); 
    } 
    ); 


    // As the user mouses over the view, we can get the 
    // mouse coordinates in terms of the page; we need 
    // to be able to translate those into VIEW-based 
    // X and Y cooridates. As such, let's get the offset 
    // of the view as our base 0x0 coordinate. 
    // 
    // NOTE: We are doing this here so that we do it once, 
    // rather than every time the mouse moves. 
    viewOffset = view.offset(); 

    // Get the jQuery-ed version of the window as we will 
    // need to access it's scroll offsets every time the 
    // mouse moves over the div. 
    // 
    // NOTE: This will change the change the refernce to 
    // "window" for all of the code in this closure. 
    var window = $(window); 


    // As the user moves across the view, we want to move 
    // the zoom square with them. 
    view.mousemove(
    function(event){ 
    // Get the window scroll top; the mouse 
    // position is relative to the window, NOT 
    // the document. 
    var windowScrollTop = window.scrollTop(); 
    var windowScrollLeft = window.scrollLeft(); 

    // Translate the mouse X/Y into view-local 
    // coordinates that can be used to position 
    // the zoom box. 
    setZoomPosition(
    Math.floor(
    event.clientX - viewOffset.left + windowScrollLeft 
    ), 
    Math.floor(
    event.clientY - viewOffset.top + windowScrollTop 
    ) 
    ); 
    } 
    ); 


    // I position the zoom box within the view based on 
    // the given view-local mouse coordinates. 
    var setZoomPosition = function(mouseLeft, mouseTop){ 
    // Ideally, we want to keep the zoom box centered 
    // on the mouse. As such, we want the given mouse 
    // left and mouse top coordiantes to be in the 
    // middle of the zoom box. 
    var zoomLeft = (mouseLeft - (zoom.width()/2)); 
    var zoomTop = (mouseTop - (zoom.height()/2)) 

    // As we move the zoom box around, however, we 
    // never want it to go out of bounds of the view. 

    // Protect the top-left bounds. 
    zoomLeft = Math.max(zoomLeft, 0); 
    zoomTop = Math.max(zoomTop, 0); 

    // Protect the bottom-right bounds. Because the 
    // bottom and right need to take the dimensions 
    // of the zoom box into account, be sure to use 
    // the outer width to include the border. 
    zoomLeft = Math.min(
    zoomLeft, 
    (view.width() - zoom.outerWidth()) 
    ); 
    zoomTop = Math.min(
    zoomTop, 
    (view.height() - zoom.outerHeight()) 
    ); 

    // Position the zoom box in the bounds of the 
    // imageZoomInOut view box. 
    zoom.css({ 
    left: (zoomLeft + "px"), 
    top: (zoomTop + "px") 
    }); 
    }; 


    // Now that we have the mouse movements being tracked 
    // properly, we need to track the click on the zoom to 
    // zoom in the imageZoomInOut on demand. To do that, however, 
    // we need to start storing some information with the 
    // imageZoomInOut so we can manipulate it as needed. 
    imageZoomInOut.data({ 
    zoomFactor: (view.width()/zoom.width()), 
    zoom: 1, 
    top: 0, 
    left: 0, 
    width: imageZoomInOut.width(), 
    height: imageZoomInOut.height(), 
    originalWidth: imageZoomInOut.width(), 
    originalHeight: imageZoomInOut.height() 
    }); 


    // Now, let's attach the click event handler to the 
    // zoom box. 
    zoom.click(
    function(event){ 
    // First, prevent the default since this is 
    // not a navigational link. 
    event.preventDefault(); 

    // Let's pass the position of the zoom box 
    // off to the function that is responsible 
    // for zooming the imageZoomInOut. 
    zoomImage(
    zoom.position().left, 
    zoom.position().top 
    ); 
    } 
    ); 


    // I take the zoom box coordinates and translate them 
    // into an actual imageZoomInOut zoom based on the existing 
    // zoom and offset of the imageZoomInOut. 
    // 
    // NOTE: We don't care about the dimensions of the 
    // zoom box itself as those should have already been 
    // properly translated into the zoom *factor*. 
    var zoomImage = function(zoomLeft, zoomTop){ 
    // Get a reference to the imageZoomInOut data object so we 
    // don't need to keep retreiving it. 
    var imageZoomInOutData = imageZoomInOut.data(); 

    // Check to see if we have reached the max zoom 
    // or if the imageZoomInOut is currently animating. 
    // If so, just return out. 
    if (
    (imageZoomInOutData.zoom == 5) || 
    (imageZoomInOut.is(":animated")) 
    ){ 

    // Zooming in beyond this is pointless (and 
    // can cause the browser to mis-render the 
    // imageZoomInOut). 
    return; 

    } 

    // Scale the imageZoomInOut up based on the zoom factor. 
    imageZoomInOutData.width = 
    (imageZoomInOut.width() * imageZoomInOutData.zoomFactor); 

    imageZoomInOutData.height = 
    (imageZoomInOut.height() * imageZoomInOutData.zoomFactor); 

    // Change the offset set data to re-position the 
    // 0,0 coordinate back up in the top left. 
    imageZoomInOutData.left = 
    ((imageZoomInOutData.left - zoomLeft) * imageZoomInOutData.zoomFactor); 

    imageZoomInOutData.top = 
    ((imageZoomInOutData.top - zoomTop) * imageZoomInOutData.zoomFactor); 

    // Increase the zoom. 
    imageZoomInOutData.zoom++; 

    // Animate the zoom. 
    imageZoomInOut.animate(
    { 
    width: imageZoomInOutData.width, 
    height: imageZoomInOutData.height, 
    left: imageZoomInOutData.left, 
    top: imageZoomInOutData.top 
    }, 
    500 
    ); 
    }; 


    // I reset the imageZoomInOut zoom. 
    var resetZoom = function(){ 
    // Get a reference to the imageZoomInOut data object so we 
    // don't need to keep retreiving it. 
    var imageZoomInOutData = imageZoomInOut.data(); 

    // Reset the imageZoomInOut data. 
    imageZoomInOutData.zoom = 1; 
    imageZoomInOutData.top = 0; 
    imageZoomInOutData.left = 0; 
    imageZoomInOutData.width = imageZoomInOutData.originalWidth; 
    imageZoomInOutData.height = imageZoomInOutData.originalHeight; 

    // Animate the zoom. 
    imageZoomInOut.animate(
    { 
    width: imageZoomInOutData.width, 
    height: imageZoomInOutData.height, 
    left: imageZoomInOutData.left, 
    top: imageZoomInOutData.top 
    }, 
    300 
    ); 
    }; 

    $("button").click(function(){ 

     resetZoom(); 
     }); 
    // As a final step, to make sure that the imageZoomInOut can 
    // be zoomed out, bind the mousedown to the document. 
    $(document).mousedown(
    function(event){ 
    // Check to see if the view is in the event 
    // bubble chain for the mouse down. If it is, 
    // then this click was in the view or its 
    // child elements. 
    var closestView = $(event.target).closest("#view"); 

    // Check to see if this mouse down was in the 
    // imageZoomInOut view. 
    if (!closestView.size()){ 

    // The view was not found in the chain. 
    // This was clicked outside of the view. 
    // Reset the imageZoomInOut zoom. 
    resetZoom(); 

    } 
    } 
    ); 
    }); 

<!--- html ---> 

<div id="view"> 
     <img class="imageZoomInOut" height="600" width="400" src="http://imedia.tv.com.pk/tvb/galery_celebrities/medium/Fawad_afzal_khan_image_90.jpg"> 
    </div> 

Answer 1

Попробуйте изменить отступы для

left: 400px; 

Скажите мне, если это работает для вас

EXAMPLE