[英]Responsive problems JQzoom
IM使用JQzoom进行项目即时通讯,不制作桌面版本,但我需要使productimage响应。 宽度和高度在脚本的选项中定义。
;(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,脚本将无法正常工作。 也许有办法让他们的选项接受它,或者我必须更改其余的代码?
正如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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.