- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
IM 使用 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,脚本将无法运行。也许有一种方法可以让他们选择接受它,还是我必须更改其余代码?
最佳答案
正如 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
关于javascript - 响应式问题 JQzoom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35863318/
我有一张主图和多个缩略图的标准设置,可以点击这些缩略图来更改主图。我在主图像上使用 jqzoom 但遇到了主图像更改和缩放图像变为空白的常见问题。通过堆栈溢出,我发现了一些声称可以更正此问题的代码,并
我正在使用 JQuery 来缩放我网站上的图像。我还创建了一些图标,如果我单击它,它们会将图像更改为缩放。不幸的是,图像更改后,缩放后的图像不再可移动。我只能在缩放窗口中看到图像的顶部。但是当我向下移
IM 使用 JQzoom 进行元素,我制作的不是桌面版本,但我需要让产品图像响应。宽度和高度在脚本的选项中定义。 ;(function($){ $.fn.zoom = function(opt
我有一个包含 5 个缩略图和一个较大图像的画廊。我将 jqZoom 绑定(bind)到大图像,因此当您将鼠标悬停在它上面时,您可以看到放大的版本。 当用户单击备用缩略图时,我遇到了问题。我可以更改更大
我尝试解除绑定(bind)并重新绑定(bind) jqzoom,如下所示: $('.jqzoom').unbind(); $('.jqzoom').jqzoom(options); 但是什么也没发生。
我正在使用 Jqzoom 为给定图像提供缩放。这些图像并排放置,每个图像的大小都相同。我想找到一种方法,使所有图像同时进行相同的缩放。 代码@jsfiddle:http://jsfiddle.net/
我有一个 product page它使用 jQZoom,但我无法正确显示堆叠顺序(并且 jQZoom 未在悬停时显示全尺寸图像,但那是另一篇文章)。产品图片 div 当前将产品详细信息挡在右侧,从而阻
我正在使用 Jqzoom 插件缩放网站上的图像。不幸的是,图像更改后,缩放的图像不再可移动。我只能在缩放窗口中看到图像的顶部。但是当我向下移动鼠标时,什么也没有发生。这是我的产品缩略图代码: Prod
当我使用 JQZoom 插件时,我在 960.gs 网格上有一堆图像.... 举个例子: http://madlov.com/vintage-sunglasses (注意:在上面的链接中,我使用的是“
我在使用以下页面时遇到问题。 http://nortlander.dk/frankrig/avoriaz/pistekort/ 我已经安装了 jQzoom 插件,除了 IE9 之外,在所有其他浏览器中
我有一个 magento 在线商店,我正在尝试自定义产品页面。 在页面上,我有使用 jqZoom 的主产品图像,以及由 magento 生成的缩略图,以及可更改主图像的 onmouseover 功能。
您好,我正在使用 jqzoom,它在除 safari 之外的所有浏览器上都工作正常,但有错误“TypeError:表达式 'smallimagedata.pos' [未定义] 的结果不是对象。” 请有
我现在有这个脚本,它会在缩略图更改时更改图像。然后我希望将 JQZOOM 添加到该新图像中。但是,如果我将它放在 Onclick 事件中,单击它的次数越多,它就会变得越来越慢......我猜是因为它运
我正在使用 jqZoom(一个 jquery 插件)来呈现图片库。 jqZoom Project Page 文档说要像这样创建缩略图: 如果您按照示例使用“常规”名称,则该方法有效。
所以我已经研究了一段时间,但无法从 jqzoomed 元素触发绑定(bind)的点击事件。 HTML: JS: jQuery(document).load
编辑有问题的页面不再可用 在 magento 中使用 IE 6 或 7 时,缩放功能对我不起作用,我通过升级到 jqZoom Evolution 解决了这个问题(参见答案) 最佳答案 在 IE8 中可
到目前为止,我所做的工作在 Firefox 和 webkit 浏览器(safari 和 chrome,未在 maxthone 中测试)中运行良好实际上它非常简单我只是添加一个事件悬停来改变画廊中的宽度
我是一名优秀的程序员,十分优秀!