extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-06-20 18:08:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

zoom and input buttons

Browse Source
This commit is contained in:
JeLuF 2023-08-10 01:03:08 +02:00
parent 87d3e4430e
commit 3bd6773e49
2 changed files with 69 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
ui/media/css/main.css
View File

@ -1898,12 +1898,21 @@ div#enlarge-buttons {
}
.gallery-container {
columns: 5 ;
columns: 6 380px ;
column-gap: 1.5rem;
width: 95%;
margin: 0 0 ;
}
.gallery-container div {
.gallery-image img {
width: 100%;
border-radius: 5px;
transition: all .25s ease-in-out;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.gallery-image {
position: relative;
margin: 0 1.5rem 1.5rem 0;
display: inline-block;
width: 100%;
@ -1912,15 +1921,20 @@ div#enlarge-buttons {
transition: all .75s ease-in-out;
}
.gallery-container div img {
width: 100%;
border-radius: 5px;
transition: all .25s ease-in-out;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
.gallery-image-hover {
position: absolute;
right: 15px;
top: 15px;
opacity: 0;
text-align: right;
}
.gallery-container div img:hover {
box-shadow: 1px 1px 15px rgba(32,0,128,0.8);
.gallery-image-hover button {
margin-bottom: 5px;
}
.gallery-image:hover .gallery-image-hover {
opacity: 1;
}

48
ui/media/js/main.js
View File

@ -3087,11 +3087,55 @@ let recentResolutionsValues = []
/* Gallery JS */
function galleryImage(item) {
let div = document.createElement("div")
let img = document.createElement("img")
div.classList.add("gallery-image")
let img = document.createElement("img")
img.src = "/image/" + item.path
img.dataset["request"] = JSON.stringify(item)
div.appendChild(img)
let hover = document.createElement("div")
hover.classList.add("gallery-image-hover")
let imageExpandBtn=document.createElement("button")
imageExpandBtn.classList.add("tertiaryButton")
imageExpandBtn.innerHTML = '<i class="fa-solid fa-expand"></i>'
imageExpandBtn.addEventListener("click", function() {
function previousImage(img) {
const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img"))
const index = allImages.indexOf(img)
return allImages.slice(0, index).reverse()[0]
}
function nextImage(img) {
const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img"))
const index = allImages.indexOf(img)
return allImages.slice(index + 1)[0]
}
function imageModalParameter(img) {
const previousImg = previousImage(img)
const nextImg = nextImage(img)
return {
src: img.src,
previous: previousImg ? () => imageModalParameter(previousImg) : undefined,
next: nextImg ? () => imageModalParameter(nextImg) : undefined,
}
}
imageModal(imageModalParameter(img))
})
hover.appendChild(imageExpandBtn)
hover.appendChild(document.createElement("br"))
let useAsInputBtn = document.createElement("button")
useAsInputBtn.classList.add("tertiaryButton")
useAsInputBtn.innerHTML = "Use as Input"
useAsInputBtn.addEventListener("click", (e) => onUseAsInputClick(null, img))
hover.appendChild(useAsInputBtn)
div.replaceChildren(img, hover)
return div
}