diff --git a/javascript/imageViewer.js b/javascript/imageViewer.js index 22e437176..fd52dddde 100644 --- a/javascript/imageViewer.js +++ b/javascript/imageViewer.js @@ -54,8 +54,6 @@ function modalKeyHandler(event) { } function showModal(event) { - // console.log('showModal', event); - // const source = gradioApp().querySelectorAll('.gradio-gallery > div > img')[0]; const source = event.target || event.srcElement; const modalImage = gradioApp().getElementById('modalImage'); const lb = gradioApp().getElementById('lightboxModal'); @@ -125,7 +123,7 @@ function galleryClickEventHandler(event) { } function initImageViewer() { - const galleryPreview = gradioApp().querySelector('.gradio-gallery > div.preview') + const galleryPreview = gradioApp().querySelector('.gradio-gallery > div.preview'); if (galleryPreview) { const fullImgPreview = galleryPreview.querySelectorAll('img'); if (fullImgPreview.length > 0) { @@ -133,7 +131,6 @@ function initImageViewer() { fullImgPreview.forEach(setupImageForLightbox); } } - if (imageViewerInitialized) return; imageViewerInitialized = true; diff --git a/javascript/style.css b/javascript/style.css index dadc61a0d..8f1279c19 100644 --- a/javascript/style.css +++ b/javascript/style.css @@ -512,12 +512,17 @@ div.controlnet_main_options { display: grid; grid-template-columns: 1fr 1fr; gri .splash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100; display: block; text-align: center; } .splash-img { margin: 10% auto 0 auto; width: 512px; background-repeat: no-repeat; height: 512px; animation: move 5s infinite alternate; } -@keyframes move { - from { background-position-x: 0, -40px; } - to { background-position-x: 0, 40px; } -} .loading { color: white; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); } .loader { width: 300px; height: 300px; border: var(--spacing-md) solid transparent; border-radius: 50%; border-top: var(--spacing-md) solid var(--primary-600); animation: spin 4s linear infinite; position: relative; } .loader::before, .loader::after { content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px; right: 6px; border-radius: 50%; border: var(--spacing-md) solid transparent; } .loader::before { border-top-color: var(--primary-900); animation: 3s spin linear infinite; } .loader::after { border-top-color: var(--primary-300); animation: spin 1.5s linear infinite; } + +@keyframes move { + from { background-position-x: 0, -40px; } + to { background-position-x: 0, 40px; } +} +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} \ No newline at end of file