响应式问题JQzoom

即时消息使用JQzoom为一个项目即时通讯不做桌面版本，但我需要得到productimage响应。宽度和高度在脚本的选项中定义。响应式问题JQzoom

;(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/VH工作，因为如果我填例如32vh脚本不能正常工作。也许有办法让他们的选择接受它，或者我必须改变其余的代码？

full script

来源

2016-03-08 marijn

难道我的解决方案的工作？ –

由于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

来源

2016-03-16 23:43:03

响应式问题JQzoom

回答

相关问题