のjQuery：ズーム画像は、私はプラグインから次のコードを持って正しく

Question

を示さない。これは、画像ズーマーであり、100％に画像の幅を設定しています;。高さは320pxです。彼らはこれらの値をパラメータとして渡しました。幅のデフォルト値は320pxでした。私はこの幅を100％に変換しました。 問題は、私は画像の上にカーソルを置くと（私が応答環境でそれを構築していますので）の割合に幅を変換した後、1ズーム画像は、その全幅、および2に表示されていないということであり、プレビューを見るには、画像の左端に移​​動する必要があります。この点に関する助けとなることは非常に高く評価されます。コードスニペットは次のとおりです。

;(function($){ 
    $.fn.picZoomer = function(options){ 
     var opts = $.extend({}, $.fn.picZoomer.defaults, options), 
      $this = this, 
      $picBD = $('<div class="picZoomer-pic-wp"></div>').css({'width':opts.picWidth+'%', 'height':opts.picHeight+'px'}).appendTo($this), 
      $pic = $this.children('img').addClass('picZoomer-pic').appendTo($picBD), 
      $cursor = $('<div class="picZoomer-cursor"><i class="f-is picZoomCursor-ico"></i></div>').appendTo($picBD), 
      cursorSizeHalf = {w:$cursor.width()/2 ,h:$cursor.height()/2}, 
      $zoomWP = $('<div class="picZoomer-zoom-wp"><img src="" alt="" class="picZoomer-zoom-pic"></div>').appendTo($this), 
      $zoomPic = $zoomWP.find('.picZoomer-zoom-pic'), 
      picBDOffset = {x:$picBD.offset().left,y:$picBD.offset().top}; 


     opts.zoomWidth = opts.zoomWidth||opts.picWidth; 
     opts.zoomHeight = opts.zoomHeight||opts.picHeight; 
     var zoomWPSizeHalf = {w:opts.zoomWidth/2 ,h:opts.zoomHeight/2}; 


     $zoomWP.css({'width':opts.zoomWidth+'px', 'height':opts.zoomHeight+'px'}); 
     $zoomWP.css(opts.zoomerPosition || {top: 0, left: opts.picWidth+30+'px'}); 

     $zoomPic.css({'width':opts.picWidth*opts.scale+'px', 'height':opts.picHeight*opts.scale+'px'}); 


     $picBD.on('mouseenter',function(event){ 
      $cursor.show(); 
      $zoomWP.show(); 
      $zoomPic.attr('src',$pic.attr('src')) 
     }).on('mouseleave',function(event){ 
      $cursor.hide(); 
      $zoomWP.hide(); 
     }).on('mousemove', function(event){ 
      var x = event.pageX-picBDOffset.x, 
       y = event.pageY-picBDOffset.y; 

      $cursor.css({'left':x-cursorSizeHalf.w+'px', 'top':y-cursorSizeHalf.h+'px'}); 
      $zoomPic.css({'left':-(x*opts.scale-zoomWPSizeHalf.w)+'px', 'top':-(y*opts.scale-zoomWPSizeHalf.h)+'px'}); 

     }); 
     return $this; 

    }; 
    $.fn.picZoomer.defaults = { 
     picWidth: 100, 
     picHeight: 320, 
     scale: 2.5, 
     zoomerPosition: {top: '0', left: '350px'} 
     /*, 
     zoomWidth: 320, 
     zoomHeight: 320*/ 
    }; 
})(jQuery); 



[enter image description here][1] 

Answer 1

このプラグインで試してみましたが、これがあなたが探している結果であることを願っています。

私はオリジナルのプラグインを取得し、「規模」と「zoomerPosition」のための唯一のデフォルト値を変更するが、それは変更のために重要ではありません。

$.fn.picZoomer.defaults = { 
    picWidth: 320, 
    picHeight: 320, 
    scale: 5, //<--- THIS 
    zoomerPosition: {top: '350px', left: '0px'} //<--- THIS 
    /*, 
    zoomWidth: 320, 
    zoomHeight: 320*/ 
}; 

基本的な考え方は、ピクセル単位で正しい幅をプラグインに渡すことです。また、responsiveを使用すると、プラグインがピクセルのサイズを強制し、ズームの座標に問題が発生するため、Jqueryを使用してサイズ変更を選択しました。

$(document).ready(function(){ 
    $('.picZoomer').picZoomer({ 
     picWidth: $(this).width() 
    }); 
}); 


var clrTimeout; 
$(window).resize(function(){ 
    clearTimeout(clrTimeout); 
    clrTimeout = setTimeout(function(){ 
     $('.picZoomer').html($('.imgToSave')); 
     $('.picZoomer').picZoomer({ 
      picWidth: $(this).width() 
     }); 
    }, 200); 
}); 

タイムアウトは、サイズ変更呼び出しのオーバーロードを避けるのに便利です。残っている最後の問題は縦横比です。

This is the JSFiddle example

は、このヘルプあなたを願っています。