45 lines
1.7 KiB
JavaScript
45 lines
1.7 KiB
JavaScript
// Gallery functionality
|
|
fetch("/images")
|
|
.then(response => {
|
|
if (!response.ok) throw new Error("Failed to fetch images.");
|
|
return response.json();
|
|
})
|
|
.then(images => {
|
|
const gallery = document.getElementById("gallery");
|
|
images.forEach(img => {
|
|
const imgContainer = document.createElement("div");
|
|
imgContainer.className = "image-container";
|
|
imgContainer.innerHTML = `
|
|
<a href="${img.url}" class="glightbox" data-gallery="gallery">
|
|
<img src="${img.url}" alt="${img.name}">
|
|
</a>
|
|
<button class="copy-btn" title="Copy URL">Copy URL</button>
|
|
<button class="open-btn" title="Open Image">Open</button>
|
|
`;
|
|
const copyBtn = imgContainer.querySelector('.copy-btn');
|
|
copyBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
navigator.clipboard.writeText(img.url).then(() => {
|
|
copyBtn.textContent = 'Copied!';
|
|
setTimeout(() => copyBtn.textContent = 'Copy URL', 1200);
|
|
});
|
|
});
|
|
|
|
const openBtn = imgContainer.querySelector('.open-btn');
|
|
openBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
window.open(img.url, '_blank');
|
|
});
|
|
|
|
gallery.appendChild(imgContainer);
|
|
});
|
|
|
|
// Initialize GLightbox after images are loaded
|
|
const lightbox = GLightbox({
|
|
touchNavigation: true,
|
|
loop: true,
|
|
autoplayVideos: false
|
|
});
|
|
})
|
|
.catch(error => console.error("Error loading images:", error));
|