JQuery: Увеличенное изображение не отображается правильно

Question

У меня есть следующий код от подключаемого модуля. Это Zoom Zoom, и установите ширину изображения на 100%; и высота до 320 пикселей. Они передали эти значения в качестве параметров. Значение по умолчанию для ширины было 320 пикселей. Затем я преобразовал эту ширину в 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

Я попытался сыграть с этим плагином, и я надеюсь, что это результат, который вы ищете.

Я получаю исходный плагин и изменяю только значения по умолчанию для «scale» и «zoomerPosition», но это не имеет решающего значения для изменения.

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

Основная концепция - передать правильную ширину в пикселях в плагин. И используя отзывчивый, я выбрал изменение размера через 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

Надеется, что это поможет вам.