Add max width to zoomed pictures.

_locales/en/messages.json

@@ -111,6 +111,18 @@
         "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"
+    },
+    "optMaxWidthUnitName": {
+        "message": "px",
+        "description": "[options] Unit name (px) for zoomed images size 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"
+    },
     "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

@@ -39,6 +39,14 @@ <h1 class="ten columns text-center" data-i18n="optTitle"></h1>
                         <fieldset>
                             <legend data-i18n="optSectionView"></legend>
                             <ul>
+                                <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="optMaxWidthUnitName"></span>
+                                        </label>
+                                    </li>
+                                </div>
                                 <div class="ttip" data-i18n-tooltip="optZoomFactorTooltip">
                                     <li class="append field">
                                         <label class="inline" for="txtZoomFactor">

js/common.js

@@ -2,6 +2,7 @@ var factorySettings = {
     extensionEnabled : true,
     darkMode : false,
     zoomFactor : 1,
+    maxWidth : 0,
     zoomVideos : true,
     videoPositionStep : 10,
     muteVideos : false,
@@ -87,6 +88,7 @@ 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.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

@@ -780,6 +780,11 @@ 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 font size in pixel(s)
         function fontSize(size) {
             size = parseInt(size);
@@ -3494,6 +3499,7 @@ var hoverZoom = {
             frameBackgroundColor(options.frameBackgroundColor);
             frameThickness(options.frameThickness);
             fontSize(options.fontSize);
+            maxWidth(options.maxWidth);
 
             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');

js/options.js

@@ -81,6 +81,7 @@ function saveOptions() {
     options.extensionEnabled = $('#chkExtensionEnabled')[0].checked;
     options.darkMode = $('#chkDarkMode')[0].checked;
     options.zoomFactor = $('#txtZoomFactor')[0].value;
+    options.maxWidth = $('#txtMaxWidth')[0].value;
     options.zoomVideos = $('#chkZoomVideos')[0].checked;
     options.videoPositionStep = $('#txtVideoPositionStep')[0].value;
     options.muteVideos = $('#chkMuteVideos')[0].checked;
@@ -170,6 +171,7 @@ 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;
     $('#chkZoomVideos').trigger(options.zoomVideos ? 'gumby.check' : 'gumby.uncheck');
     $('#txtVideoPositionStep')[0].value = options.videoPositionStep;
     $('#chkMuteVideos').trigger(options.muteVideos ? 'gumby.check' : 'gumby.uncheck');