mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-21 02:18:24 +02:00
zoom and input buttons
This commit is contained in:
parent
87d3e4430e
commit
3bd6773e49
@ -1898,12 +1898,21 @@ div#enlarge-buttons {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gallery-container {
|
.gallery-container {
|
||||||
columns: 5 ;
|
columns: 6 380px ;
|
||||||
column-gap: 1.5rem;
|
column-gap: 1.5rem;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
margin: 0 0 ;
|
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;
|
margin: 0 1.5rem 1.5rem 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -1912,15 +1921,20 @@ div#enlarge-buttons {
|
|||||||
transition: all .75s ease-in-out;
|
transition: all .75s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-container div img {
|
.gallery-image-hover {
|
||||||
width: 100%;
|
position: absolute;
|
||||||
border-radius: 5px;
|
right: 15px;
|
||||||
transition: all .25s ease-in-out;
|
top: 15px;
|
||||||
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
|
opacity: 0;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-container div img:hover {
|
.gallery-image-hover button {
|
||||||
box-shadow: 1px 1px 15px rgba(32,0,128,0.8);
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-image:hover .gallery-image-hover {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -3087,11 +3087,55 @@ let recentResolutionsValues = []
|
|||||||
/* Gallery JS */
|
/* Gallery JS */
|
||||||
function galleryImage(item) {
|
function galleryImage(item) {
|
||||||
let div = document.createElement("div")
|
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.src = "/image/" + item.path
|
||||||
img.dataset["request"] = JSON.stringify(item)
|
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
|
return div
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user