Отзывчивые проблемы JQzoom

Question

IM, используя JQzoom для проекта im, делая не рабочую версию, но мне нужно получить ответ продукта. Ширина и высота определяются в параметрах скрипта.

;(function($){ 
    $.fn.zoom = function(options){ 
     var _option = { 
      align: "left", 
      thumb_image_width: 600, 
      thumb_image_height: 600, 
      source_image_width: 1200, 
      source_image_height: 1200, 
      zoom_area_width: 600, 
      zoom_area_height: "justify", 
      zoom_area_distance: 10, 
      zoom_easing: true, 
      click_to_zoom: false, 
      zoom_element: "auto", 
      small_thumbs: 12, 
      smallthumb_inactive_opacity: 0.4, 
      smallthumb_hide_single: true, 
      smallthumb_select_on_hover: false, 
      smallthumbs_position: "bottom", 
      show_icon: true, 
      hide_cursor: false, 
      speed: 600, 
      autoplay: true, 
      autoplay_interval: 6000, 
      keyboard: true, 
      right_to_left: false, 
     } 

Теперь мой вопрос я могу получить эту работу с% или Vw/ВМ, потому что если я заполнить, например, 32vh скрипт не работает. Может быть, есть способ, чтобы они могли принять его или мне нужно изменить остальную часть кода?

full script

Answer 1

Как LGSon сказал в своем ответе, было много трудно закодированные ссылки на добавляемый к узлам в вашем DOM фиксированного измерения пикселей. Это делает попытку обезглавливания скрипта невозможной, поэтому для того, чтобы выполнить ваши требования, необходима модификация.

Вот модифицированный сценарий, идентичный тому, который вы уже используете, за исключением того, что вы передаете тип измерения в конце функции самоинициализации ,

Вот сокращенный вариант ваших плагин изменений:

(function ($, measurement) { 
    //GLOBAL VARIABLES 

       ... 

       //centering lens 
       this.node.css({ 
        top: 0, 
        left: 0, 
        width: this.node.w + measurement, 
        height: this.node.h + measurement, 
        position: 'absolute', 
        display: 'none', 
        borderWidth: 1 + measurement 
       }); 
      }; 
        $('.zoomWrapper', this.node).css({ 
         width: Math.round(settings.zoomWidth) + measurement 
        }); 
        $('.zoomWrapperImage', this.node).css({ 
         width: '100%', 
         height: Math.round(settings.zoomHeight) + measurement 
        }); 
        $('.zoomWrapperTitle', this.node).css({ 
         width: '100%', 
         position: 'absolute' 
        }); 
       } 
        this.ieframe.css({ 
         display: 'block', 
         position: "absolute", 
         left: this.ieframe.left, 
         top: this.ieframe.top, 
         zIndex: 99, 
         width: this.ieframe.width + measurement, 
         height: this.ieframe.height + measurement 
        }); 
       $(this.node).css({ 
        'left': left + measurement, 
        'top': top + measurement 
       }); 
})(jQuery, 'vh'); 

Вот демонстрационный со всеми модификациями библиотеки интактными: http://codepen.io/nicholasabrams/pen/GZrjRW