[英]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.