Jquery: Yakınlaştırılmış görüntü düzgün gösterilmiyor

Question

Aşağıdaki kodu bir eklentiden aldım. Bu bir Resim Zoomer ve görüntü genişliğini% 100 olarak ayarladı; ve 320 piksele kadar yükseklik. Bu değerleri parametre olarak geçtiler. Genişliğin varsayılan değeri 320 pikseldir. Daha sonra bu genişliği% 100'e dönüştürdüm. Sorun şu ki, genişlik yüzdeye dönüştürüldükten sonra (duyarlı bir ortamda oluşturduğum için), 1. yakınlaştırılmış görüntü tam genişliğinde görünmüyor ve 2. İmleci resmin üzerine getirdiğimde, Önizlemeyi görmek için resmin en soluna gitmem gerekiyor. Bu konuda herhangi bir yardım çok takdir edilecektir. İşte kod pasajı.

;(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

Bu eklentiyle oynamayı denedim ve umarım bu aradığınız sonuçtur.

Orijinal eklentiyi alıyorum ve yalnızca "scale" ve "zoomerPosition" için varsayılan değerleri değiştirdim, ancak değişiklik için çok önemli değil.

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

Temel kavram, piksel cinsinden doğru genişliğin eklentiye iletilmesidir. Duyarlı kullanarak JQuery ile yeniden boyutlandırmayı seçtim, çünkü eklenti piksel boyutlarını zorluyor ve yüzdesi zoom koordinatları için sorunlu hale geliyor.

$(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); 
}); 

Zaman aşımı, yeniden boyutlandırma çağrılarının aşırı yüklenmesini önlemek için kullanışlıdır. En son kalan problem en boy oranıdır.

This is the JSFiddle example

Umut bu yardımcı olur.