响应问题 JQzoom

Responsive problems JQzoom

本文关键字：JQzoom 问题 响应      更新时间：2023-09-26

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/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

相关文章：