Add max width and height setting

_locales/en/messages.json

@@ -111,6 +111,26 @@
         "message": "Multiply the size of zoomed images by this amount",
         "description": "[options] Tooltip for adjust the size of zoomed images option"
     },
+    "optMaxWidth": {
+        "message": "Set max width of zoomed images:",
+        "description": "[options] Adjust the size of zoomed images option"
+    },
+    "optMaxWidthTooltip": {
+        "message": "Set max width of zoomed images by this amount (if 0 then no max width)",
+        "description": "[options] Tooltip for adjust the size of zoomed images option"
+    },
+    "optMaxHeight": {
+        "message": "Set max height of zoomed images:",
+        "description": "[options] Adjust the size of zoomed images option"
+    },
+    "optMaxHeightTooltip": {
+        "message": "Set max height of zoomed images by this amount (if 0 then no max height)",
+        "description": "[options] Tooltip for adjust the size of zoomed images option"
+    },
+    "optMaxSizeUnitName": {
+        "message": "px",
+        "description": "[options] Unit name (px) for zoomed images size option"
+    },
     "optCaptionLocation": {
         "message": "Caption position:",
         "description": "[options] Adjust the position of the caption"

_locales/ru/messages.json

@@ -111,6 +111,18 @@
         "message": "Умножить размер увеличенного изображения на это число",
         "description": "[options] Tooltip for adjust the size of zoomed images option"
     },
+    "optMaxWidth": {
+        "message": "Указать максимальный размер увеличенного изображения:",
+        "description": "[options] Adjust the size of zoomed images option"
+    },
+    "optMaxWidthUnitName": {
+        "message": "пиксели",
+        "description": "[options] Unit name (px) for zoomed images size option"
+    },
+    "optMaxWidthTooltip": {
+        "message": "Ширина увеличенного изображения не будет превышать это число (если 0, то ограничения не будет)",
+        "description": "[options] Tooltip for adjust the size of zoomed images option"
+    },
     "optCaptionLocation": {
         "message": "Расположение подписей к изображениям:",
         "description": "[options] Adjust the position of the caption"

html/options.html

@@ -47,6 +47,24 @@ <h1 class="ten columns text-center" data-i18n="optTitle"></h1>
                                         </label>
                                     </li>
                                 </div>
+                                <div id="divSizeSettings" style="display:flex">
+                                    <div class="ttip" data-i18n-tooltip="optMaxWidthTooltip">
+                                        <li class="append field">
+                                            <label class="inline" for="txtMaxWidth">
+                                                <div style="display:inline" data-i18n="optMaxWidth"></div>
+                                                <input class="xnarrow text input" type="text" id="txtMaxWidth"><span class="adjoined xnarrow" data-i18n="optMaxSizeUnitName"></span>
+                                            </label>
+                                        </li>
+                                    </div>
+                                    <div class="ttip" data-i18n-tooltip="optMaxHeightTooltip">
+                                        <li class="append field">
+                                            <label class="inline" for="txtMaxHeight">
+                                                <div style="display:inline" data-i18n="optMaxHeight"></div>
+                                                <input class="xnarrow text input" type="text" id="txtMaxHeight"><span class="adjoined xnarrow" data-i18n="optMaxSizeUnitName"></span>
+                                            </label>
+                                        </li>
+                                    </div>
+                                </div>
                                 <div id="divCaptionDetails" style="display:flex">
                                    <div class="ttip" data-i18n-tooltip="optCaptionLocationTooltip">
                                         <li class="field">

js/common.js

@@ -2,6 +2,8 @@ var factorySettings = {
     extensionEnabled : true,
     darkMode : false,
     zoomFactor : 1,
+    maxWidth : 0,
+    maxHeight : 0,
     zoomVideos : true,
     videoPositionStep : 10,
     muteVideos : false,
@@ -105,6 +107,8 @@ function loadOptions() {
     options.extensionEnabled = options.hasOwnProperty('extensionEnabled') ? options.extensionEnabled : factorySettings.extensionEnabled;
     options.darkMode = options.hasOwnProperty('darkMode') ? options.darkMode : factorySettings.darkMode;
     options.zoomFactor = options.hasOwnProperty('zoomFactor') ? options.zoomFactor : factorySettings.zoomFactor;
+    options.maxWidth = options.hasOwnProperty('maxWidth') ? options.maxWidth : factorySettings.maxWidth;
+    options.maxHeight = options.hasOwnProperty('maxHeight') ? options.maxHeight : factorySettings.maxHeight;
     options.zoomVideos = options.hasOwnProperty('zoomVideos') ? options.zoomVideos : factorySettings.zoomVideos;
     options.videoPositionStep = options.hasOwnProperty('videoPositionStep') ? options.videoPositionStep : factorySettings.videoPositionStep;
     options.muteVideos = options.hasOwnProperty('muteVideos') ? options.muteVideos : factorySettings.muteVideos;

js/hoverzoom.js

@@ -799,6 +799,16 @@ var hoverZoom = {
             audioControlsCss.margin = audioControlsWithVideoCss.margin = thickness + 'px';
         }
 
+        // set max width in pixels
+        function maxWidth(width) {
+            imgFullSizeCss['max-width'] = (width > 0) ? width + 'px' : 'none';
+        }
+
+        // set max height in pixels
+        function maxHeight(height) {
+            imgFullSizeCss['max-height'] = (height > 0) ? height + 'px' : 'none';
+        }
+
         // set font size in pixel(s)
         function fontSize(size) {
             size = parseInt(size);
@@ -3795,6 +3805,8 @@ var hoverZoom = {
             frameBackgroundColor(options.frameBackgroundColor);
             frameThickness(options.frameThickness);
             fontSize(options.fontSize);
+            maxWidth(options.maxWidth);
+            maxHeight(options.maxHeight);
 
             webSiteExcluded = null;
             body100pct = (body.css('position') != 'static') || (body.css('padding-left') == '0px' && body.css('padding-right') == '0px' && body.css('margin-left') == '0px' && body.css('margin-right') == '0px' && (body.css('max-width') == 'none' || body.css('max-width') == '100%'));

js/options.js

@@ -84,6 +84,8 @@ function saveOptions(exportSettings = false) {
     options.extensionEnabled = $('#chkExtensionEnabled')[0].checked;
     options.darkMode = $('#chkDarkMode')[0].checked;
     options.zoomFactor = $('#txtZoomFactor')[0].value;
+    options.maxWidth = $('#txtMaxWidth')[0].value;
+    options.maxHeight = $('#txtMaxHeight')[0].value;
     options.zoomVideos = $('#chkZoomVideos')[0].checked;
     options.videoPositionStep = $('#txtVideoPositionStep')[0].value;
     options.muteVideos = $('#chkMuteVideos')[0].checked;
@@ -195,6 +197,8 @@ function restoreOptions(optionsFromFactorySettings) {
     $('#chkExtensionEnabled').trigger(options.extensionEnabled ? 'gumby.check' : 'gumby.uncheck');
     $('#chkDarkMode').trigger(options.darkMode ? 'gumby.check' : 'gumby.uncheck');
     $('#txtZoomFactor')[0].value = options.zoomFactor;
+    $('#txtMaxWidth')[0].value = options.maxWidth;
+    $('#txtMaxHeight')[0].value = options.maxHeight;
     $('#chkZoomVideos').trigger(options.zoomVideos ? 'gumby.check' : 'gumby.uncheck');
     $('#txtVideoPositionStep')[0].value = options.videoPositionStep;
     $('#chkMuteVideos').trigger(options.muteVideos ? 'gumby.check' : 'gumby.uncheck');