fix the issue with incorrect js options on page load

add a setting for lightbox max size images
use setting for lightbox max size images late to let user change it and see results

3 files changed, 11 insertions, 17 deletions

diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index 20531fd4..be2424c1 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -71,6 +71,7 @@ function showGalleryImage(){
 
                     e.addEventListener('click', function (evt) {
                         if(!opts.js_modal_lightbox) return;
+                        modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initialy_zoomed)
                         showModal(evt)
                     },true);
                 }
@@ -80,13 +81,17 @@ function showGalleryImage(){
     }, 100);
 }
 
-function modalZoomToggle(event){
-    modalImage = gradioApp().getElementById("modalImage");
-    if( !modalImage.classList.contains('modalImageFullscreen') ){
+function modalZoomSet(modalImage, enable){
+    if( enable ){
         modalImage.classList.add('modalImageFullscreen');
-    }else{
+    } else{
         modalImage.classList.remove('modalImageFullscreen');
     }
+}
+
+function modalZoomToggle(event){
+    modalImage = gradioApp().getElementById("modalImage");
+    modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'))
     event.stopPropagation()
 }
 
@@ -101,18 +106,6 @@ onUiUpdate(function(){
         if(fullImg_preview != null){
 	    fullImg_preview.forEach(galleryImageHandler);
     }
-
-    if(Object.keys(opts).length == 0) return;
-
-    if(!window.lightbox_settings_applied){
-        window.lightbox_settings_applied = true;
-        if(opts.js_modal_lightbox_initialy_zoomed){
-            var imageModal = gradioApp().getElementById('modalImage');
-            if(imageModal){
-                imageModal.className = 'modalImageFullscreen';
-            }
-        }
-    }
 })
 
 document.addEventListener("DOMContentLoaded", function() {
diff --git a/modules/shared.py b/modules/shared.py
index c2c3c7ee..439c8edf 100644
--- a/modules/shared.py
+++ b/modules/shared.py
@@ -160,6 +160,7 @@ class Options:
         "interrogate_clip_dict_limit": OptionInfo(1500, "Interrogate: maximum number of lines in text file (0 = No limit)"),

         "sd_model_checkpoint": OptionInfo(None, "Stable Diffusion checkpoint", gr.Radio, lambda: {"choices": [x.title for x in modules.sd_models.checkpoints_list.values()]}),

         "js_modal_lightbox": OptionInfo(True, "Enable full page image viewer"),

+        "js_modal_lightbox_initialy_zoomed": OptionInfo(True, "Show images zoomed in by default in full page image viewer"),

     }

 

     def __init__(self):

diff --git a/modules/ui.py b/modules/ui.py
index 7422a269..bbd4e2b8 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -900,7 +900,7 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo):
                 with gr.TabItem(label, id=ifid):

                     interface.render()

 

-        text_settings = gr.Textbox(elem_id="settings_json", value=opts.dumpjson(), visible=False)

+        text_settings = gr.Textbox(elem_id="settings_json", value=lambda: opts.dumpjson(), visible=False)

 

         settings_submit.click(

             fn=lambda: opts.dumpjson(),