Responsive problems JQzoom

Question

IM using JQzoom for a project im making not the desktop version is done but i need to get the productimage responive. The width and height are defined in the options in the script.

;(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,
        }

Now is my question can I get this working with % or vw/vh because if i fill in for example 32vh the script is not working. Maybe there is a way so they options do accept it or do i have to change the rest of the code?

full script

Answer 1

As LGSon has said in his response, there were many hard coded references to the fixed pixel measurement being added to the nodes in your DOM. This makes monkey patching the script impossible, so modification is needed in order to fulfill your requirements

Here is a modified script identical to the one you are already using, except you pass the measurement type in the end of the self initializing function.

Here is an abbreviated version of your plugins changes:

(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');

Here is the demo with the entire library modifications intact: http://codepen.io/nicholasabrams/pen/GZrjRW